{"_id":"@material/mwc-switch","_rev":"732-754f904b12db1a2aa52b9cf7bc10a4c6","name":"@material/mwc-switch","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.1.0":{"name":"@material/mwc-switch","version":"0.1.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.1.0","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.1","@material/switch":"^0.35.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-GfWMmGcGn8a8UvxkpwPsxuWFOis7RCdjpS8rs56taz0s77CwOYNmhqIXnnyE+Wb//gMUASURjjLy/ozXAjq3QQ==","shasum":"90add6efb0a9f0140e337541d5d8c5358f4e89e6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.1.0.tgz","fileCount":5,"unpackedSize":9487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8OmNCRA9TVsSAnZWagAAVVgP+gJOeQIEIOC+7cXGZXzD\n8Ja3ZV355kg441YCdKUGcc+0sS3kVuhTpt4yuMke3SPa206Tjyx/n38CTxqB\n1Yt/rmKaR+K8zKUNZNCvjbfxqZBthsMNRFPDjFNtVE3Rs1L7KLVwLnEbfDIi\n9E3W8n+L/4H6BqVy5uXX8vjWoS0QfZXJiph6za41UOajO23ZgdjysnHN3D5V\nZO92156ySxqnvtw/PwmzkqGEKdBZmlrIzOQU+c+qEFWzAgxa2xauQNIy0JPj\nPc9NQoRBdLfwRwfjsChkHQgfFyCrdvoVeoGjkCdw+U7qB9JbYTsUnz8PAxCb\nc1klq8MNHXLuLl3JVj1EPoqhYNPJduN/qUEft5dIICu6BLuT/APecihj+0+M\nlVBf6MBIblt74vSF4OQdZbOaYvJp6kX5/uGg/dcH25YeFMGYEjw5yGTGsxFj\nD6la+v9KuyEVRvjLjL/NjZNPxwRVsKqxiV2PlnuJDRolPvZM7X3SO10D42pj\nebBFXBMXGXJAhGEXHGhRNa56h8rQhO9xWO/xxjVx9eGLjGUSpnnL+d4yckIl\nhZNpVh/1MKTPMtMpI4Qy28PpCQSG1AFF2nt89UHwer/+ALWEj6zvV2cbC06x\nL+AOo11Zvfm9PDqooeuIcb2i2mHIpdoT6lO3QQiTyZp90gTz1RQZ94/5xNVj\n6KuP\r\n=a/un\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWESWe33IKedmTjeee4sWqeE5h3mjPhOpK+HN6KlvjXAiEA9Z0+SDm8fYTtfOcbi/ehfNPAOjiwdGT/8LLdd7ifu54="}]},"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"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.1.0_1525737868856_0.696082647840466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.1":{"name":"@material/mwc-switch","version":"0.1.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.1.0","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.1","@material/switch":"^0.35.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-INaB7hzyeTBK/n18N36tyAFSxYFqExpapYiqxVMJ9izvFrcHfRspbH/vKT0RboDnKXeT/NPOWJcU0QcPqBWaNA==","shasum":"a859e1f592b4a59f47086d8a090a7cc55e342083","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.1.1.tgz","fileCount":5,"unpackedSize":9494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82KECRA9TVsSAnZWagAAg40QAImeGYU+rrzuqUSifuOX\nuIceTuGcgPaKrAarscr6wL9rk7nXOXo8YJ/HB2UBznIcRQ7CG1NOD5gaQFU3\nvcUFSzVBkYNqLmtnLgLTfPbUUjDZtea3sCrlSyhkTcSfvK1bxUurOj6Ue08n\naSzGZpm/myTIO1Bex0bW0JFxMlV3k2zPlUZMq+JbKc0J38nQO5+tZXPIyKUB\nV+skKy0i0iX/NSMF9UEPbJhZkzveMGLt2sMTxhz8ZtyQpsR+c/IhGR5IXymr\nkDk/qSGL91YuPx2pXqVQMHa6N8zzeXzFsz+y2U0KywLCgH7EJJUyllbRwZAw\nBm83PS5fb4lWlm6Lp5+gJzBm/74rDyTP2HfCYkh4cUrFP8bdTtFVMfMzpYDG\nCBQVUKRCE0kCaZEjN5T1NIrFtMO2jBrvJMmbZjje3DZB1jyjeDVaojw+WtYS\n3cfC7Oz7Zh41l0MmTx2Vn0QRE338Ll5QONPfziAvPx14lKLvPWi51ydnTSg0\nCkncEHpXq1cn9SZ8HeYooypuJYyrWI8byRQ6LhpJjBp3dzPGwHo45rf4+edy\n+IIPG5usNUXYQVSiz7tI9qzY4wbEF3STW+EMY0M1hkpRgSoMIy05zowA4jxt\n9uGvlClLzj3aoH5XT9KtpJdMc0TV6Nt4GIhwJ2exdj7gtgKta46UWtDlldvL\nI6dg\r\n=n3LA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOxeGkcNoq3dWup9bPWdXp+9SrkF6fXYvteq7Ux744bQIhALSAj3yFZIau7+HIESckImlr3qVMNFnn2/TMAbUwYuJI"}]},"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"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.1.1_1525899907947_0.5431825403391493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.2":{"name":"@material/mwc-switch","version":"0.1.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.1.2","@polymer/lit-element":"^0.5.2"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2","@material/switch":"^0.35.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-TeIvwE36xUwsdQldQoTJgl/Muwn1FKKoioSUJw2tbx/QUr7ULnCdNJGWYi2cQvH0UBHtmmAdEaZVokEKgrNx9g==","shasum":"e9e05607e22ecdf879ced0c03eb35d4a951d75f8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.1.2.tgz","fileCount":5,"unpackedSize":9580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIvFdCRA9TVsSAnZWagAABwcP/37yKUljpS2lW6SWfpPL\nyOQWWcXeTclX/6SFFJ37UTTz+D0/oUBoRCGu3Ne2uBdJGvbyDd04CWL9Tg5m\nFiLZGSO+6/I7hbKxRaggOk9QlS4bltbTb/Wu+3RT4ISDyzBqS489JVi37vqb\nACzsyMRyV7vRB/tssMiNSo/bfMsVUczhFogHd0rqqi4N0khm9M1bd7SyCXnJ\nzuv5m54mX5Ki08ll7H1YPFLBs5X/MjL5Mps0FN81zrHupol5NNSKJ7EBZg8l\nvq4K/cOWeTM0fNgNF7sLzu+bJE7dfubJHneHZLSJP+Cn0MNr1ON6OicoSgqL\nHwmw9wotdQGImWYu3t67ESdXxIQNAz1+cn8W4+Ay9i/P6nINsgaUHPidqWjk\nYWD8uaprtuiH5afqdiOgSGoY67xI6pdQiW1F5Otzv3Pk2dbE7NLVFZYAEg57\n6Dqs/7ObB5HDdGWxDcxZABgN89pOwvQM+GrlysDSEaL934QDXjkXA+QR3j8J\nlKrHGIBWayfkiIyTXyxHZvA88yuJctQK5gw8f55G9BCRbFqazg0zWJVh4pIL\ndwjiVhVs0CqXhS7Pvb0qmjgUEFtoUXIojYZ23vFxI+E5/kfTWHXKqFU4ierF\nAd9w4gUV7re5sfWtTvvJ9a8bjpce6823R+Sg4e98lA8EBxkwQp2hUYeOzfgG\njxot\r\n=oC5z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH6P3FzjcmUSqXP98nTC1oDuZEQ0l9M11COcRB8aixMCAiBZcmIy1gCv49o4D+lTGmZFm7VEhNJEKWe5XsABSsX6Ow=="}]},"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"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.1.2_1529016669300_0.576136157499878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.0":{"name":"@material/mwc-switch","version":"0.2.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.2.0","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2","@material/switch":"^0.35.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-8dUJ4tonuVfaZB05X5u8MkvPn7qZKuEATwuKNR7giCTXvd94LdnRpcFyDc2b90VgQB0jaTs/IuFYBGPWX/Tr9A==","shasum":"c5f3bcd1e6ee89fe20d77613c0736ec361202806","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.2.0.tgz","fileCount":10,"unpackedSize":31526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmwKaCRA9TVsSAnZWagAAHOEQAIFLsqXY9BZ95C1nbGCz\nFR/CWdfuZ0aE2g2VDm0CGD62uml6yvzjPMvwVs3QULGBlpfXtNsx0H5v6Q2O\nauTWYs3nVuejVn8Pj9GaFrG8OCh4zxxBT6WRGzcZvUn9jqpAQ6YGSd56e246\nEvpZmxHiIqn+xnnkt53/gLjShl3e9DuFiKNHn7f14bkXx4pceQ1Ql3a7HrDC\nsf0Jj3ig7JYnRXnJP6MUHRlo9760dDChqolHS2cwIlpOEkdwbgA4ixXYTJVW\n9LzbdgEwQS0LD9OjLUxlM+dyT2dWlPRlrxc4sLGuWyzhmpvKaIi3ryTl43Xu\nmb7n6+hzE6+sMT1N8Vi+MADeTGMsYWSE1SsvJBrotXFhlPw9FtttLmvJYEvl\nVZyw3QVF+5GgPuGGhvtYPBqBFhG3JjxbQwyvXhRK8LRtrjvkqUg2JxqPyOwp\nU2140JotrQUaGy8TJrGo56WcQtkcX8DRunC7UaYeatMLj5bmczbQVVchSbKB\nb6EbnCfkrXTG0cQ9LFC10YLfnoNvlBJQa/QtfARfmwB09Xm6FDWiZft3ejxi\nz2xTbsJG551Ebm2sT7P3PoSAyPve2+hoI/wNwUzrlFFdZypcR6w7895JhBGJ\nB8d4hQ9giFF/uF+qrgrTGVHCWQuXAfxCId2tEKhPttSLsMBIfe+5EjwsRlHC\nQk2i\r\n=IaP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXHhs4SsrffqXLN5ka2eYKUDfDqZJhyCavVipGix6QJAiA1mmlLsQOFoykUQigT6cezzpU33T/78LsXuZ6DDbvyzg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.2.0_1536885401298_0.8487169958908578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.1":{"name":"@material/mwc-switch","version":"0.2.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.2.1","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.2.1","@material/switch":"^0.35.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-gKPhnupjslyl/NUqJOpGpCgdaPbXnEsGswGxUsMy3Bzq/O5+2BFYmNqski84btsYjMVNvAp4yjLlS9VgIMtUQw==","shasum":"4aa98a67482452092ede0f360662b038cbcc152e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.2.1.tgz","fileCount":5,"unpackedSize":10059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpZQqCRA9TVsSAnZWagAAN7QQAINv7eZpMirwYw8GHbBB\nxx+e2/3RovABAt/StsDxa2h0SCfwYGy+HmHjRJddPcmoygXG3aKOq8pAOnCK\n+VmYaAzvjAfoaUca2a5M5/vqpe0odeDUc/Z0MsJVDy8r8rxsGDHKPWvMSN7m\nWdLuVfTJzTmh4/mriVPiYdH25QjAvB8mfS3Xab0oVJEmvjSanedzC5oG1Ue/\noTOu0xKAG/AzSAyjNfFBGnTu+Zhj0x5YRreylyU/BpcQS0whm0FalI3H9qxW\nsRY+x4BQTnLuoAFG3jm7LxVlst4wKI/9OylQ7bs5rqTx8COk7xsi490OjvJ1\nLc53nCTKz6A5fkV9+95SsOAcibFacQtKOGNgHrMDOjm30Std64Pikkl6UxAN\nxC5T4nX0bOcgpgF99y6DZ3njncYoI7M4PrQhKeFKe1tiSvDGk1se72GUlusG\nYkc/9xGhha73KFwFXHjxyxwtyUIsawIGi1qarXSf6vuFOFAAm95r/NEDJIBx\noLqIwBtCTem/yylHa+f5Z6f7VCqsaXyWLb2BUzYjhO1MzILBPGiEb0+x3chJ\nZfeArSU8HNJubZCM2Zfckhp4Zlf30zmmBSLmhJ8+FM45wD8hF/bO4xi5EGun\nskqBAMuxaeVN5+Z9o4mayd0bEwscpf5X4wRRQRvTKPyOSfQL/26VSJxpdSZz\nUmnJ\r\n=kx5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFia6PnQ333qebdayo/IhsfHXHDNofD074Jqk5opM4fnAiEAhgfwEX3fLDU4q937/myqYrr3GMJe4x1TNohnIk4bV8o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.2.1_1537578025763_0.38084632678171193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.0":{"name":"@material/mwc-switch","version":"0.3.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.0","@material/mwc-ripple":"^0.3.0","@material/switch":"^0.40.0","@polymer/lit-element":"^0.6.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-sVqieYqqtqrDclCsrJVMoOU6jYckNzNUQG9386ajOhgkGm7UoPl46OtdSzuRsgNRnRuTHei828SuXNUBTQp1pg==","shasum":"5ee9eb5b4583c2e5830d0cc504d49e3050d5a6f3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.3.0.tgz","fileCount":12,"unpackedSize":40153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtqGNCRA9TVsSAnZWagAAVAIP/AnFxmOSpja/Svyja/Pi\nz3q5ogMy8IEzpzUCeVRTeQzR5wNESeEilmnO8EZYNaLNF/BX/nehyYgy1HDh\ntRjJwrCLGMcHjUZB8BaUbJZMsppBOG7uKRTHxzoEh2BmnK7HEJw1QfSPxUxj\nyWl3CEZmUDGHoE1tQr083R/bdMZsvrNg/VpwoBAb4qtJiUDMgfrAsTSiGj/q\nb5Dr9EYknvbSoblCnezxNZL8CyUKxeQpIISQzR3pB6LZMD2IJSmFZQWasejm\nr6V5zMBVq6+Xm2J2M1celIqMQ9LHSLZAF3UQgeXUWO7JKnTj5GW7Uo8eOu7P\nfa3EBzm2nkUmBAxqiwQtJEj3pz8WGvXi6DSekcZniV1VhZqWziZ2Dv53Scdh\nDTggD52BhdIKkzvzPDOx/RBqsk6r6OkuH9Npaj5K8ggmE81QdO+0YSiokE10\nTtzsf28SVDM+/09inNWoEenF8B2eSyyEF94G3zan8jJ6YaQi8EQ5a6BJgn/s\nFMNQ7ThnWQ1qG8uwzsTV2U1V7AoD8UH/YNEMqhzVVHjDc1crUjCVf0tOd5Ej\n33lnOm8XR+DpIGX4HWM5CtLc3i9LENDC+migVklBZDeolshe7qlk6ugZ3s3J\nqjvm67F7vIOTZlJ3iVz4aF2c2pVYvxtB3uArsjnL39KyRaHE6NTWE5pCMVHp\neHDn\r\n=Zj1V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCINX3QpzP+as33LBRoczWoW8BdHsgWRwUUWJQRh5ZoZQIgK44UVyBCQ2VjieKDvnIqXF0RCYnPnsKCZFB2GUlVoic="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.3.0_1538695564654_0.8890438844567095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.1":{"name":"@material/mwc-switch","version":"0.3.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.1","@material/mwc-ripple":"^0.3.1","@material/switch":"^0.40.0","@polymer/lit-element":"^0.6.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-5r/chZrbcuLh1sLqtpnNodmGzqFCeAlv1fWliQig56TRBbrZjSRY78qm+JOg9/rr3fj92FcI5c2tKaHWoud79g==","shasum":"2daee64827ca283aad2072af92d07fb9393f54d1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.3.1.tgz","fileCount":12,"unpackedSize":40192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu64UCRA9TVsSAnZWagAAYscQAI4c5uFH/Vhoz1L+yZhB\n8Kmyf6CYUVIjDvprfBtcF/RxvXDACnmXS6gNt+hrHbM1wCQNf0epibdUHcsw\naxC/Spm1jm5g16BA/Pisvol5F2CjLfZKoOER9sQBa/gcbs4g2FiPYTYCQbRT\nArP4pYyUEjzABacgGGy+D71qVFtbOrUXD+8OB4JS2siEgmIyydGt167KCiqm\n5WvA5/7jTThytoQFHXjRy6eXv7QNOWDlZASl/VuP28S/TkrU8KhvCMhH7NbT\nuqJknYwkBlAb7MD3/HluYivBQnvqvdie2+BBxgNnojpwhn2NWAcbGxyVGQyT\ng6Q/ct11FngicaxrSwXlT8TMyq85yJehq+MPQgH6wJuTL6cYInAKySsFAz7r\nQtQyQUhFr8Wne1CY1y00RJvxbXDIcSzZp9XMW0/+CLi/OVOS5yyR99J+DISp\n5KR8+F0oZknkOjJepha4pXdSEMm5Wc/ThSOc0/H1AdGB7j9TC5FG8oV9mqjY\nsG+KukrzRGufh5OKnf8ixUvTIFJwqDYsSwJAEktcq2NnCP/TXKtOEURKkg/S\nZ7LSYUECESC1V2Osq6fGn9sm8711ACJUxtqCxTKNeYn9G4mUrLvL8j9T9xQU\nr8RbJQu/hzBoOl0qTrRnK6yVvgQK//fuC6XRunQvDf5sBypznEHQIwq0dxGF\n0YTT\r\n=nCdU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkiJu5RtgXnMSNasDKd/VwN9wNSHlaYxeKv0GzrCQTKAiEAtK+auMWVCDmYEa8iaxJcQLXXnGc4vhBl9cJHYxfwHPk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.3.1_1539026451479_0.3647051120147602"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.2":{"name":"@material/mwc-switch","version":"0.3.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.2","@material/mwc-ripple":"^0.3.2","@material/switch":"^0.40.0","@polymer/lit-element":"^0.6.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-yBB2AeXHVV5TiHBd5Rrge/JLaNXjBH8oQXZe61ZymgPNMdsjqXfnbIN466/EOpU/3X65DijneBJIhMYcMONWSg==","shasum":"fee45fbd256d04cf031bac5c14aa985345d82ba4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.3.2.tgz","fileCount":12,"unpackedSize":40229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb73eNCRA9TVsSAnZWagAAmv4P/10Qgub4IxK25tn+lHO8\nbBjECwEvLN4otxYWTLUCSs7b5eqwOjq/+wI/XKxp9dG3LUux7mTxP6iNfqKi\nJpcVpR1AzY8XNSDWsRx9HtZWTI/AD66BOXq4UgfsHOiCQDGkyacMNmRBE+X6\ns7czEVBp3QVxag4XILBOBPnobpfABzzcGbRwZIN+BuLPTuBmEcIphEmF7ofG\nOriX/18pum47/YdJmZcYSsUJAM3V76g/WYTE69afDq9yCT0E6d9MzwYr3bqo\nJVjcJ2QMIqB17hXjSyf3Gu9YX6VxHi/WQE0H1sI5wQJPcDSkL1P8FVzJks8d\nOJ+SdD28coqWIHEmnP13gp0BIqx6UYpTYU6F4UA8MuqKuxdfXR6J9pN1fPJC\nvBLq54JbGcXwrArMA1ikb7IgOf+LDPJL/76D/XP5tPylEPk/ggovG7tHkuVl\nBBqwJxSERZykvnMUNh5clye7NIKhHEo8+6W5G1d9Nry2h9rtQ8Bv9c3IFvd+\n0M8RHBF5SuHOjF5FVIBU5YFPs1PHOby92K1j5zYhWDlyldCJe/lixzB+pNlM\n7oZWzADSpoz+cX1YYayERtf9C4dfGvUeM8Vcvivw927IfRUqqcklpkw5p32H\nruPipcNtzBmWFkbn+Yxr71Biw2CUUci+aAHYEOQktcDXEmMRrSikaIMNa6C/\nnE+D\r\n=u8sg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAb6wl3Wx3ErG/N0/dO9qI8XZHgEePWYpGRcGWlObHO/AiAKj/q8wrd5o+m5ERE1LZLXSIR3YVEhH0i8K7DZxgtHAQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.3.2_1542420364953_0.39434405001762163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.3":{"name":"@material/mwc-switch","version":"0.3.3","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.3","@material/mwc-ripple":"^0.3.3","@material/switch":"^0.40.0","@polymer/lit-element":"^0.6.4"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-ahz+IqCipL0ywa4z7cHRwqRmVkyw33IGKD9LkPBQSaz1cRegTyZFSsxQPJ8IfRE9aSIO+TpODOw12O8n3MMkMQ==","shasum":"9c5ec3c76e5b8e82dd369d1ec49953ce898094c2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.3.3.tgz","fileCount":12,"unpackedSize":40229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBdEmCRA9TVsSAnZWagAAb3IP/AlS6tlSTBw2H/5pINrY\nTH3LV/6i5l+4mYJTP0Z73ghr5+1K5oq6qkH0ZtfuP98p5FcHL+MBw9ltlBGq\nkzx/dQfbyG1HKhk18XqXIlj+UJID6yH3ioKKK0BbW+ZCv5O9EE7fjXT1G98k\nXd7sIxWR5jgP8NYPaCOJJI2a5U9PI1kFGic4DrgHENDWQkd+3fC6loFidaEN\nJMbK2pjEfPFSPQQX102uVM2a92d7RBSiKCAhZqurbfM6Vh5/WcpiQrupfV6d\n4ab1vs9WXh8+2u8GgnSEoRMuMSEE0YGK7ou/qcvCLtUmI/d+MnLCUP4Ff16B\nKuzhW/Fv+wkoORVhifVjTLitDCjHol3hdeF+GKqDQ5QGqVGbcV+qQwHKJKY8\nCVPjLVAyFu2tSLs4lFfvV4djaRmQdJkjv1EYDz7+MV1bISOoY8QBLhRnQsr/\nD2PYflIa5t5w7yhQSXKWj8S2o6pyr49ulPn8fR2NontmGrPTaUCVbf6JJm9s\nc64HqcjMQHmH26NBFJItzgnCUKYk202E+a2I820rVqpoa0swqS1cnJG+qMwQ\n2h2ie3V4swsM1RzfqMEumRoAwnZMnqeCFQ6A1tIjs2OMWVncoMOm3nrXP9GH\nobTmvHrPS/3DX0v5hEoB0eNronMpCZ6VXjDQS2A4V8ds0Nj34yWasis+V4Sz\nXc89\r\n=s5FW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDECWZnkDRKGWaqqrGLPg63R13bAM0YaD3DEFJb2r6lxQIgH4EKcsrdrDGbAH3Or38NqjIGRc66OKz8HEpiqqBzleM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.3.3_1543885094041_0.8303026975024395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.4":{"name":"@material/mwc-switch","version":"0.3.4","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.4","@material/mwc-ripple":"^0.3.4","@material/switch":"^0.40.0","@polymer/lit-element":"^0.6.5"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-QCW/yQ0AOou+wZRHPd1cJBbXUXOxZnAzbal7ChMu2hiKZ1sXBMuuqevQv4FKLo+HycwFuD+z4TmXyG2PhkYPLQ==","shasum":"db92ae05f4d0659532b17bb217ae9dcd87e8fa8f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.3.4.tgz","fileCount":12,"unpackedSize":40209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsN8CRA9TVsSAnZWagAA3y8QAIU4bfigPB4wDLkagBUM\nQvCLdYcjoliwWr3PGPrdCegqTnQ63U7Rj3o6rMhEcAKjxHScEPAXaI7R5WYG\nvZCb3OG1rRdwqWrf2JVtyJrGfzWtXB9e7Gjr8gOnUl/Y4L0Bh44b4Hu6DxyL\nf9UN9A3NzqwuMOc3ifUneCW95Bw2NEaahJXGJ+t4ChAaB9ZiTKfDs/Xlq0MD\neY9WruuePC2QwaF2p/B90cjMg/qmRTiWRxAOhTifmwCnXkvhF3wfW45cjgJA\nt0uCZd7Szr10DHv7TBln5ypGP5Mf3+ylEX+AhRkClhUCQOGpNUYmdExP8DaI\nMrwGHFgQZicS/pEd0imCQdQL1iW7qXYkIDnMHf5h+tS3IrBBiNT4yS6hD1uC\nYe46mGFE2y3e5hEiGZBt4s81uZPsinRHWspF96ISYhHdDKQHBEy/ADiidNPD\n1WRacpTLwgKOFPSwSn8kw1aJnvHYBnkYygTHbtI38UFaiJakfXtnbLhLgAGy\nVvbz/zrwLmHQQMQuoC606bqXwBz2qyezLe27At+isOAt79XOW5wq+XgpNAdH\ntq12l/sdK9gn7ex6JjCLdNyMqj78eMkbqhzDldWBuDuw/ZhJvnkIPgyQt3sQ\nx8IPij2YoiYIUkHinGP/GvZM7IyG5uYVsHG4Wq9+VqRWqe1HqB842+z74GD4\nrRk6\r\n=rXbo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbdJE9kkjbSh3KGNp0gcGKa6kMF8vDeHN5eOcPWybZLQIhAPuQSqvgnlMBWXAlkIMqGAYzdy2q6oJw8LWIubFspOu5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.3.4_1544733563531_0.9747710547707897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.5":{"name":"@material/mwc-switch","version":"0.3.5","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.5","@material/mwc-ripple":"^0.3.5","@material/switch":"^0.40.0","lit-element":"^2.0.0-rc.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.3.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-B90Jhumfqb26eJ8jknUtQ5VScj0yYcv749DAGPemzFbpJbrT/hJn6Wtgc0WXpH2VJgfFreds7fVMJWtz5m+mLw==","shasum":"d88546ee9541758d91dbebaa4e48354e4cc5ff1a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.3.5.tgz","fileCount":12,"unpackedSize":40179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORXTCRA9TVsSAnZWagAAI4cP/3pWsqRpgYTCF4mJiAOk\n2/9tKjHU6XXq4IWmih+2eqTBrTbRyf+Rlkw/IaJ/3SXQ+CbV4hVV/+i95mXu\nqE4pSta2fMIxPq79cPh/jiRt7DXx91YHpruTM7tytLLKPoL8QqP8mZyEvCre\nE0MB7d5AM0hg+06wFx1aX3TiB2emQLnnBRwXfzaw8CJggxSsRCslFZ3KF7kZ\n6pTaAdUcMc9zWagq0BVXHKSOCDn3SnZzRJ0WnC26Jt1uMAKDoZv7qQaFoG5x\n/+TxqttCqrozZFCdoqBdFoQhZIquWIriDsiLXcPBIxbOg7yYbo8rXQFZbwl4\n2tpXI9VgLxs9aX3AW1E7/V5psZ75mGhvlcNykjRmliQR51K30OE4IL2u6nmN\n4fxWFlRmt2sH+b0ULXy/GkQmEks+jFz1GZmlcxPSNdsMWycDPA7Q4bUVogKa\nnHK1n1IdNnjZL3V99JVSwz4ck3PURcgcwTORhBhJkjGKTPvjnew9VuzNRMNk\nKYemn6L49S/cMjgdDdbyrW74lL8MFhIS1BaLrlJSz6xoA93QQXyz2d6T7TGA\nfQph1Exie8UyN16KmsOPSSKk5Er+vKTo3ao1Srlu8oG/ktJqC49jObwmwL8W\n9WvFTvvvkNQ9A9xFSiTguHUKNDG76SXJICdljDp0INbZoybff2MQ76zL6mqN\nnGFt\r\n=EHh4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgA/L/5+G22o8qO42Ae9RnHW1l44rWkHjtmCi88pcI4AiEAqHiWe90z0z4z1FCubOLiVLS0CGngp7OZcY88SgZ6vgo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.3.5_1547245011065_0.2271643355470483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.6":{"name":"@material/mwc-switch","version":"0.3.6","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.6","@material/mwc-ripple":"^0.3.6","@material/switch":"^0.40.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.3.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-thCIpQd/eHlfziQKKsGfuogOlCJaAfARDEPT9D4N6EShg6qODDIYvU7MFkVYS6yS2YrSbMbe3vdjS6ys77xTmA==","shasum":"b2026fa97dc8c3e9acef432e4bc2e50980cdce17","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.3.6.tgz","fileCount":12,"unpackedSize":40046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWe+jCRA9TVsSAnZWagAASBoQAINfPxyXV35Id+9I8bkY\nP4L294dKy8PWOkUa2XMmmQ69hzL5uWbi2cEcrMU9xTnvGrDAL/eTAosHG5V0\npbaPlbHEuNs9v1sL8EBPl4XH9imDal1GJghX7yOCHgAvl7bIzm0cz+Yk7uuF\nmh0peD+GmlqslcJ6YjhLsxjzflqmFC1sRm7o4VtaYPqn/MTuflvtWnG1yyoq\nrY3eRzlrKhuOEDTHnO33sTurkPOa4tRn8ulz7/GNy+J7DAneBXmgIhA1smYA\nwGi/K9RSAvXcJeZhGJ+54fXsJpdGsb5R4k34CzF3lAgUT+QeMzS7yWGnRMZk\nHX/lVghcDOTWJzD7jnRI31kvr/pPV15Gn+Riar1hOtbZd06472QNJlw/7Ikn\nbNEarDl76+arjmHCRmDJsdA1RUkqI4VIEsIG4xYG0Mm87zjV712TxNbHVcKp\nIejuO662SN95UFVku4xvwV9aoXgs2v7u1t2o4W2algG5Ez8WxmCAjBQpVd4S\nhblUXKaFGQLA7gCYF75lTQpL51iZew0+NyTqJYQgFjLqbGcS/uEolDQgqVf8\n+M5oiWzBaNlcC6CWlcRdxtNHTBO8QBMVczPSaKWzeJGf1qJ5Y6j56RrOkqhN\nRZeSvkwdb4IKU6oJOx78zAyVcIcrrB565UAQbvsS7kltQYk/0GA3zWPUpdoI\nPGC8\r\n=c+0l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGoVFxJ4Ey7t9icAbYr8pMxxvMjrsBzh6ktj+7IUv29mAiEAiJKXL9BQoRANhi0OkkLhV8JlC7fATj+Kaf7qrNWX558="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.3.6_1549397923260_0.21094392259233352"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.4.0":{"name":"@material/mwc-switch","version":"0.4.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.3.6","@material/mwc-ripple":"^0.4.0","@material/switch":"^0.44.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-pEb9FLR6nDYJI0/xuuUWkYh9RlWQJvWBe4n9/p+NQpFjH5zp1raNBEzAZP5YgUQXCTWIKpCfcPr0WWg7BaUwTw==","shasum":"0feb4d7128491b5bbede87c1d12c9bcdc08d5061","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.4.0.tgz","fileCount":12,"unpackedSize":40046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvbdCRA9TVsSAnZWagAAlUkP/3R2mqb9Yb77j95/2i06\nV8RMx0SZsePKDeA8isD7oAlh0Jtegr5SKdNtOvr3u50PcV8PMxPFX5tdyC0a\nbHl5EU8bFLG2crK0Zkji95bzM6BPVtP5KFjpE1F25osY9yDOl3sVK5pajGjp\nmGD4e5sqlJ2zV20+Qla7NXpl+kBzQOhbPPIsYGNlueVA3oJzrvR1ZmPrttR/\n8rvWrH4u4mr4oy7MPn6iYI6EF8OzP8AQs8JAdxKQi0VGPzJtFkkLz9HV3iUm\nPr6upTiCPf7XjjdDnhatUwvaRyqy5gzQupW/becjz8hAH5DxGEPSxgLfJDmg\ngQLt7+hOiRNtBpKYSTl9GGrM2F07/9oEzRPw5YyEF3NxBkCtO37y0452S1dn\n0Pz+ZmFvGEG/sOWOjyQECb12i+ngyRg+UhwJxn6giC3LIlzWvoOP3p8zY29r\nPqzzUpkBjncOErq+/5irwI/VLRgg1jZZAZw+atF/tt9LpNsRgwzEdaZQIJmZ\nvJeGuX88xCLQbUd7OIoaOAB5ZT9oJW3y/H9CCDcXM/XbrnGxz3hFnk03CskT\npFX9/Agn6Rm7eLC9bb1SgsRoAx7J/ckYQH50eGdBF6CjkrpUyOC6oT1jSHPf\na3vOe0TpxcnysJRA+ynp3/qu9k7fCvfcoWP7HjZ6l5R+nwam3VPyyNI2BEs/\nKPln\r\n=78Wo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq6x3a6JEfBVg5yFmFJkqzZvYJdyFZoCPNust2EkBx0AIhAIiJ7db7D/pxtw/+PSxmY2DgNY0ea+pwloWwIqNE76XN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.4.0_1552348892595_0.8183643180364786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.5.0":{"name":"@material/mwc-switch","version":"0.5.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.5.0","@material/mwc-ripple":"^0.5.0","@material/switch":"^1.0.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-Xio2qIjC6X1NdseH0J4W8NwalLX4N/kq7ATL7zReDmm/h/oKRPI4EM9p+2fVRaxZCz9hOV2N5ORa4aXNYL6QVw==","shasum":"f352bbac13927d76286a7f6c9488c845c53bebd0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.5.0.tgz","fileCount":12,"unpackedSize":39450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmqoACRA9TVsSAnZWagAAI0oP/Rc2p3hmD7OdGeD4K7Nl\ncUgLpPG8P5yzVicg7x4vHcLPUdfv8MNQFLsBEi2NHDLlwJ+XyHSS+CvayS0/\ndVeMBW/+GiGrcAUcR9bR+e4MiN3ejNcc/SNYMoKmPCCkMQNIQssVCpvoaOyV\nvlwkne1ZLboRyaTNrre9aD2gf1LrLwUfjY6EamJr1NAMogPhoGrIBcFb3iOI\neAnixwV6s4jb6FIa21Km6h7l6JjDbOfsg5s02R9mfE8pTAu1L/u3BIBuZG2e\nuSSgYm4LzPtBEFKeYx0hQU2oJrVBAQLIbaEwZ5PJofIhNyQWYA5njidvPc2Z\ns07/0R01roxDeejYSIltUyqvlSwNIaEGKA+AvmVVkI3coC+T4Vxlsp4Pa1WH\nwYy/z16NQmcjc/ay1J5SFS4Wc/Kgk9lOI9IdfyZ4JTgAi3owzOBzjn+yUnCD\nhnXxiewL5fhbjNdQD1QvgnQCJ6DTtsJYOpqJbKZmD6B7hvkSOOUKiMNiZMMd\ngquaWa3QSt8wveMAIwIvacsP2V3vFaM2WH1Pvc6YP83RXOs1aejwqN1Yfysk\nQxL3DCMn7unpgCGuZZX9fmejZRuUaVqwNybQl/lkYS/TmHKPYK/DwmXYRjuU\nNujXJ6SI1LwAOO0Rlk6Z/x/AyKKASnCEFcvYwjx+A4Z7Z6h2nqtgbv1ew+8q\nGA28\r\n=dv/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrR0Coqrz8lEktTaquZZ71gdW/6NjCInRScGaalNzakwIgcxAj+1Mo30VvKtKQfHXnASCh9aJDSyw3VfLfnAgKxHM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.5.0_1553639935769_0.24126238750465334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.6.0":{"name":"@material/mwc-switch","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.6.0","@material/mwc-ripple":"^0.6.0","@material/switch":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-n/WLxRGo7kVLHDl2ObDt5TcQk56Zc80A+h18hiX+uEuBXX/aPLJ+FO0nVRAMtUUyQWyIPnANscEUFyW/n2lIGQ==","shasum":"a56ad76744a9de3353002c4877e237189c353d16","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.6.0.tgz","fileCount":15,"unpackedSize":276807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAqCRA9TVsSAnZWagAAGl0P/iUuQSWgGrOzlqr/VCMb\n3fDfNZPEh9eMtU863AUdb4OlURwWrQK31zF6iY0u23MAKs2xxoi0sChksiqE\nfDJLV51kARFw1nYIvKRn0h9qoSdOAru47mDWxot6JMrHZcgY8T6MGLuP2dtJ\nivHqfeU+Hv5lwszRP5iDsSnKTmv8ZiUH9G0T8ZmZSvqvE5oDPRbKqaxvD09l\nrgAeInw+AuRduLgK8Fu56zj2QXSj0xvb8M13kE90gTbvevKYTkFQqmuTuQQU\noNKz0ozgqTfJ1wJfMaq9KaE6WjWe0sdgFM6rpcWZdRCTJTCFNUIYmrC0Bh8y\n8Wt4eS04rgWaXgDdsvcj/Wj8j9yJlY1HW857kK6YMWbJRfWAADVekkircf1Z\nT16hyg+gc7zXMmDoG3hX3lYNEFtStP/cBf4hsVJuz9+lrBUp0QQmgnqk0sZE\nav04GmgqvoFbm2YNitWdkdV+3gvr5vV/e6MxQl6NFWCV70JrYLEoHsZsp1jC\nx5+jA5UL1CXVfnvfwOYsJlKUGmKZ97UDxDJs/Lvi63Mou5GTT9NVANR9e99X\nbmhR+/Oh3HX39FC7O7TQtmHJmT/0qZNCMqcNd02NS8glX30eVikgO0JVvUBy\noVK3IR4AYXnsBi3QLWcHqC0ZeyPbnawzKiGgnCcGHDGhHXeBmyYn1nJUuXcC\nXfBp\r\n=Bkgo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsIYSZ7CRquYVlf/Ddaxszbku9rOQxQPLuXPSb+XFHRgIgE55d3+THf4uuMpsRu7PnvglAxv2n0JA/3ypT1DZonxs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.6.0_1559773226415_0.03794990745730664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-switch","version":"0.7.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-ripple":"^0.7.0","@material/switch":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-BfnPcFxGCvD5Xt7NuJNlf5Vvdh6Kt3OcQUM2CseD+bJMyRW/azpzXc8iT2b7aQMhvzb2FE0XtMUHo1Z6mvXpmQ==","shasum":"cd50250c459b50580a8228b0eaca3a6f652a52eb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.7.0.tgz","fileCount":16,"unpackedSize":54730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9lCRA9TVsSAnZWagAACZAP/R/2YY7gXOMhqFT+1bEs\nGHIS0bhuN65Mgp9Xyq/RZPaestNuj4TSf900Shs9caNexQpznOJzAo2wFtLB\nRvXxvCR39LvIfTfrtVXU2RVGBlTHWS7ou0DUVcw4fpmwkdEjrEgNH5CGNoEo\nEwbEOV1PV1/0fvYRpA/68o8euqOrhgkhSviYSSQNad12mMUchJ+cVaLeEyMF\nWmn56C3ghveqTaXWxrLpoQ3j0CmaQFNRu8RuwkDOsvo5K0ZobmEc73gzCmNH\nQ4NQkG+HOGHafAW2Ja/79yBQcVMNJsVc3zJ+E7Xe55Ra/DzinhuUwrM2/pLB\nDZ8+VIfuESBUB53NC3gJ25uSbbDImMNEgOidpNGPKdQlZVwO7XiYUtIATWDd\nIo/6LmdBTgrGTZF3QMdxs9AybCePxcc/zunUFcjqnVFesGfzn8v/N/oIZ/NV\nZVw6B6Uwdo1qFDYQ1iIxS41x5zNdXSpFY45I3XPkyP9kX/dniWnJiytIs0gy\nJ3aREAJekeVhqq3yEDKV5TgcwvNLRNbPVp7RJvQ8e1/KjShc9cSw0K0wFS6f\n+4S1gOF1kRECVcN5hKMpuhE+LKOJsGmG2N5mRU92KM6wL3V+6Yyi4zYzueh0\nff1B8FBZSpcMDrSsuGbVDUsroWdy5rJZtwj1G7jUAJxHlxokEg9ClOU5q6qd\noIdZ\r\n=uDOv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEluNQTmYj8nPNSmy2CvkUBhslf650D/YUUvljiGwaVAiEAvHvRYa6Df05w8L9kOAQofEUSGZG8JX3ijAqTRb2MXl0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.7.0_1566941028948_0.3277541700015798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-switch","version":"0.7.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-ripple":"^0.7.1","@material/switch":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-eO1AkQh2umFmPtUTsmyxmy9Y3BJv/X8kjnV3RfOyvann7+61u07qPKn8LPKdTcfBedIig8JKQTFcoZb4utOzjQ==","shasum":"e6c8d8b2d6a68c8861f7bc8b3af20252635f0511","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.7.1.tgz","fileCount":16,"unpackedSize":54759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezkCRA9TVsSAnZWagAADpEP/ie6AQenM38JEtIUXyu4\n1mbXZpDI6eDbfDGNlfxB4KQdemmKix2feCb3Xni/AkqXX35U4zo9TTSE9V3c\nS4cxEAx/2ueGdmLj0sm0PWADeZDB54Off7iqmcJAYVOeZ043yZbOv/bOGyOV\n/jug4yCnTTqi9KSKoDFvIEVUSbP+qD6y6zTZy4Yy+94k2zV5uKsA35/RYo8V\nOydKE7k15kH53Idgb2cunoi4PjZsxWdLSWVNZCMlzPJVILzymH4Kxe9efVrp\nM8Ad/YOKKH2Qr0yxLsIu0iHwhL6devKwW6KX1t/PpRjOUlK8d8Gn2r4Ynjf6\npGTUpG3oZHJvD2dATMGZBTEbrViVtyBRatgMNLWZhkT1CT2MRNosAfBhGlih\nBPJHMHEOMH6sH3dBXNmjzyq0ZDA0CJ3T0PGAf/rg8JPykQkBDxvCR+TD5ZE+\nCZSmzM4wHfK5ru5u+FDxVlNgdbBg0TMj4tp8xRAP0uOdpeS1Vtfscuetj84H\n5kKMrQiMwRHsI3MIYfOTTc7THml6TwP9jY4uzMPAQxOCp0156mb2we6g3AHU\nTAcNesxWtCYnEM1O9uzEgRJH7/wsCutN/qS5sgv7ook9V9l4lo5ocj6P+L9+\nsqyvLgWMXtos92mpyp9obg2xlayvXZAnBkahZUvhaha7b74Nj2uz4FmOFqfx\n9GCa\r\n=tztY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQSZwD4iH1V1Yk3xBICUMJB/GYC92Fj+XECFnle4yFkgIhAOKa6YxykUJyQ30G1X6HMWk8XgNne0vU08K6aSz2MZ2m"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.7.1_1566960868211_0.3728646364647277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-switch","version":"0.8.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.8.0","@material/mwc-ripple":"^0.8.0","@material/switch":"^3.0.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-q6VWrtOJIOjyl35xo6G2npq0guac0avqUH+gR8TvQXSO0E2+pB+2GX+PhSryVBbFxgJRiVmfRlWBeIzlYtI4mg==","shasum":"5a2afc95e5f65ad077781fe16b6231cf5caddc9b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.8.0.tgz","fileCount":16,"unpackedSize":53716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+kCRA9TVsSAnZWagAAM5gP/RXnp6XtitmtfWs1iDyv\n1Gezei+wfjOzqeiCfoeoFHtDIfNUxnWSQzqS0Q+upqlcUX+eIet7ao3C+qH/\npxZCpXEug1NFCFVunbuH+vdXRXpJU4OwY8Km8HiArGu8zTu3loeM0dQSWvjg\n/hT8Rrgw0+EAr51Z0za/T6AIYVXUnfcGmirNuoBC4jKOC8sNbKAAhayl74NE\n5qV2CIv8/qxp3hysOnYTcKh6NU8he86b68rqcATxiLziZ/g7cCXiRCC9ddac\nUXQ9ofr07BnkfxaRatNkn/fHOilHh/o3Wb5Sqkc0w5z4oYAXduW37iWFKn4g\nU9aF2B+9N9cx6r7vfWVWTObfzhsmhkhd1lWQiR82csGX8JE8gXuhswgUk7rY\n3tFlNa8DHBMcNzl0UAMlnDmHp5ROoVCqBRGK+QAsNFjHIrODxosLk2TDU65w\nkyYZAxQTSKJEso32YC6TAVQHpEgYkktLe24TJyBM1ajczm5BARHzSEx5teIF\nWfMJxdTlS2DbeE4MHka6IXgUPqjZIRhAGgPljgpjhoDYdn8hVIEao0s8gxG4\nbyQchjy81xRZG62Fa2rKlVcQF3zjcOwytJab1e8KG9Ma4hN6ZoYXkHpOH0T/\nVNxklXg1dCImrhpwSc0znqppW9AJlP5wO5nDK+xIqp1ZNGRcLuWvLuh+5moh\nFNgL\r\n=3WAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnDlshAS6T5++gQPkT8ilkePmr73WgIIhErZXPea94DAIgR8eq3VZAY+HSdmrbs/lt4RdMJ5LxpxC5eQMYtmNrjKQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.8.0_1567555492014_0.2117443220198576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-switch","version":"0.9.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.0","@material/mwc-ripple":"^0.9.0","@material/switch":"^3.0.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-F9VOQUV5gYWGYPdzsSHztnUFpogfX/+Zd6757ohu9ppEnM8dcS2UrG/Y+hg2bl1PQsZDWuo2YyKx6L/cB3/2bw==","shasum":"3d6295436cfeef5566bf95a25241a4a03089998f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.9.0.tgz","fileCount":16,"unpackedSize":53684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeQCRA9TVsSAnZWagAAoPIP/jRN6+VJLjWqyCE/GNOn\nOtGXHmR0YwFbcQuua/NiFMQP+5rVJvjazAceF4JVT9STjnT0OF8b1YDtZkQg\nijVAr5zunhPMXA1v6M2xUI2ly9r0xltxFr8/FZTfOcgi+ciwTwhdqVaZIBzy\n6dJzYk2O9imgUHxEeqaskQsRlieDV/YSsRzq2tWK3UafWqfmsoy+69BUgd2r\nef8/EfDWWDSo//wZF8q2aseF+kZp2gsDFwf1O+FMf22UrVdEQ+/W6AQ3plue\nhrEvkPCNmirUNIwIm8/0Cm3hbdLfydBhcgtzPyjZcuH1j2XrvXm6AaTRZLRK\n7Zxo5L3by/oIC3hfTGKS7lVXLYW400ot39OudVyQQFMwIYS8OAS3aGcRZg+C\nERHAqc+2AuLOfjXGl3oeMslfnF0QRmbRGjTMG2uHvw+z5+7rE9rThskvAdmt\n6Wej7syIHN7mkME15p/rnPA1dWPE9KFfBgW1uIvAjhtTwAwaPLQaV7RbIdEv\nWcnWbmIfcVtFkTQsL4ABlKhoP/aQ+FcLOqVYPpfL8N1YAS+YKWn5ndB9dGnG\nShp4JBnRk3+b0IJJrN8xTgykJrrp35NsZSJaj3kI4t6Y2KGrIm8vYG8Eo6VU\nJ+E6j/HoZHocwqqC0cZdwVCeaVoqOPeaT9ACnv6kOQ2WDL/3pfiE8pVzpk7D\nBbPG\r\n=LnPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBk9Mcoq/M7XzxmA4ke1QIIydEok5JFqDNQc4Zg4ZgRAAiBeQlGZp+v60AV5lWk8oAlqEWgRP26j6WxgPBfvZP31HQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.9.0_1569548175543_0.3698174100731235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-switch","version":"0.9.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.1","@material/mwc-ripple":"^0.9.1","@material/switch":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-DxE8iTDP1csF0G9fnRSS+nocwM/YioW8IgU9RwwOHhXaNjQvX2nabBHC24ASNgJ8S9brfkiblEht2QAdj1Tsng==","shasum":"513a6cb88cb3ccd1c7bac01f5648a02bf748550a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.9.1.tgz","fileCount":16,"unpackedSize":53674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4HCRA9TVsSAnZWagAA70QP/RbEU6q3OnVroUyhHMNr\nNz4s9NCulP9wGepEZ6+w9wF0GuwdMIGgl1CIDN+j88sx0qBKoX329Ooc+4Zu\n680hifWg0iWIJHGSjhZO39iYFCKzMFRKOzF/eFtGc+hxt0gSmk+1LDcTApHa\nUjgaXWWUaet89zC13IC9FgdWFPIqML5kMPbGCsiL8jUFuP33maNYy2uMpFCu\nTzQwehGhlMf14hMHuRw91Q6dT2f5DzzMdEdWPig6vQZNG4nzr4a5T0IKM4In\nnyQV9Bt1VqUYYfNeWuVWrSo6nqsd5l6IwkM3sh+iYJ3QGKBZ6NUouioIAz9t\nT9c90bC8y+0PvQ0Vlav0ncEGVR19t7PPvjrOGVvUaawjI3+uu6iGG5xTmldd\n+tJ2YTuj0ZqIGOL9q9wXVvJcsYqJ1fi1SuE6LvaQfhis27xj4VehytMGL12z\ncQ40tlKmexOe7wvLymRoGP7ELTx/Y6fEAw94Cuwp7Ud5qfIx0c7vJgcnTG8Y\ndN6jklBl0Nfyq/LeZXCxq9f78Ab3MLAlF8VClraJKZDD1mIcX/Ef0SgOujP/\n9nwU3vpX5cHG/2Jl+NUwJRrAVWpIPckwJb1A8V+hpuLwxEX3k+7Ry07LTr4j\nmh4OoTJIla7LPdFGhhIhvgNMeEPCTGof0GAyBZD6MH3JMfr1IPEO529106z3\nVBdg\r\n=oUdE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEY8DK1k9rIb78t/5KRuOGBiN83hXbEUjAGmcQeUvqnAiBaK4WlBcVUnn+Xe3KrZjGHmv7YAgqhSuyGxKn3D9Co/w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.9.1_1569877511161_0.9198236832256912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-switch","version":"0.10.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.10.0","@material/mwc-ripple":"^0.10.0","@material/switch":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-0B+b8HOH+WPJkI8Qz3Oh+uU+vL7Bp5p5CrUAT3gOZ6D52s8ozF0k+ARqzkyIUoB0awl3fyAj2AfTFs2tjD7fZg==","shasum":"789ba8ad9062db93121948cc34d38a277c25d996","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.10.0.tgz","fileCount":16,"unpackedSize":53713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAUCRA9TVsSAnZWagAAHyoP/1HGXFeyWAWt6Kg70kjC\nOmVkrR5QNz7DJa46Jq4XEMAbTac1BmkEexwvuWsFd5Abk9ukiGTXbGS/JMcQ\nVYMrOCjYZTTC3WeUIL0XPKRgCdoy2Bikxawof8dLS+a2DrOgJyQVxSFqGxKG\ngBtaXBLIbIXmOS5FSsGCp6MimR10BF5CruRzuSSysDzTRDxoB+qDhnzSNYGZ\n7fe4z7jmAd38IZn7nSz6mn1euSNf9DKQnIUOkewupBuVl0LGYf5Fj+NbwfCt\nhm7xjusFPcLgb1bb8DygcQa8wt/cwTKZIqRse9aKTSPmVQWTNmrDq0ZjjLe3\n2I9bi2p3KGLxeyiknGqkiChP1cQT+mrMXOxXSFiJVD1FbyKTbb9ioqjGHAwp\nhlCWRactPt3EsG/YXl8d2upCx0eEvSJ9Hk2WZbKPYYUUUvO0K6DPU/C7PTjG\nZfaZsR/slvetANqGM1zRcVXtJuGJZggxJqfsBuslGe7N9B/dPKx0pqaEiPWp\nVCVodPhgx+muu9kecfDvm3u4cf+NtNeKeQGtsVPFbEqmdRSKLdAZjpoigd/x\nkPsKCHaAMdCmPGkq+s8AzVV9VflegltCV5PnPDT1XUq0yvo7HVUCpcbJpqTm\nPi+EPXejcumbUBXhanY1sKUvmGwvnmAxo9P1e/e2WP0KuknLq9u8p1pcAYCK\nlZhW\r\n=ylIL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0yIDiS3yoZJTiWUdW56LdmaOI2SLekFYyifO8vXYaigIhAI54Xj+ZXdVaws+TPF7f7/gQ/np54bFLGxtyWfV/jpaA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.10.0_1570836500370_0.1320004190271138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-switch","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.0","@material/mwc-ripple":"^0.11.0","@material/switch":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-QmsSJt8LUcM9YOa8KfriqeRn8lYQSuZzHtVbSb3lCKtOeZo40IgvqVeOOstuRcO1H9X9J6i4dXN/fbebfNo5Kw==","shasum":"3e7b59fc8a47850e1323d9776c1321b3ea65bb53","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.11.0.tgz","fileCount":16,"unpackedSize":54521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3uCRA9TVsSAnZWagAAi9gP/iBEVQCj8XgcGJ0wWQSK\nRFqgNpyrGjyxyXBNyIFz7kvgkYhbxdufoG5ZNjOUIwE+9q+5X9x489heGb15\n7Q+19qh44Z8BSy/XWsmijxeSJG9yjkpye/68NLp2yFIENLCL50gScwK9n3ky\nQ9F8bj0vDOsPPJhfpiBHWriqZg9d5VSfiui20/+2gEzRy9CYRvAIvwMv+zYC\ny8d8pc9sgkNlY5NjGR0gqEARvpvZ0azwYWnzO7OR0IeC4xcx3rqNWex9U4DA\nI/7Nb8ZpJrU6vGv17joUXI1oxSaPcQEQVIfEEVlFKGpE+uOvzDR+VOZ6X76I\n8H0KhpaMfHOzAEmWoTiNNX10jYzxnpgU4Dfc2ZOt+zRtSFaQ40FrCNLznnnK\nB46NWJPeqsXiCRn7XKo0HZkWHyXb2LdBVBmjzIezhu9LqxvU/HTWRnBKlfQ6\nrscrZzUON9EbNY0rD6rJmt7kRTMqMjOMzlUJgsaht3Gqmb/mk3HYKSCp0ppQ\ncTXDzIkNycTuibxO6RsVyfT8ghi5hAQ8+j1jBSYypcjUTayQlY4omI8lVSeX\nNn0Yw9xsElOIxJq39ZDH2y3ONd4VPayMYxvrWA7k8bDqhcX8oUGiymEtTb3o\n6DVmCkcketqIrUZh4RSUwG7JmWCoDCfFJe8f7WOu1R/obHggQkru65Lg+gpR\n++t0\r\n=aixR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJAz5OW/zoIl3YrJgCHY12XUVro1sja4oF8Y72pmPTUAIhAOWASCZ/t9NkHSXELx9VDpwAqwL1ujvat9U72nLwgIW2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.11.0_1574804974004_0.2385795070110983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-switch","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.1","@material/mwc-ripple":"^0.11.1","@material/switch":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-xIHP3ROuibYnGopkO3Yt872sWzpFQHF9ipBUWSeE4YooMv40gkawMpsYW03GsjnjLhmAG7n/kCgBpndYVHdx2A==","shasum":"1d725ab76c2a3a68fbe57b81adf29c6900d162c1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.11.1.tgz","fileCount":16,"unpackedSize":54521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLDCRA9TVsSAnZWagAA1e4P/AySMjaws3/itP5c1m2N\nh3L2UHqaHenHtMQbdQ7Jj08MbLM6zOoPKI1G/7iddF78Ba5T5L5KfFpRntGb\nbqMnsa0yRaq23tWCkgllltNuKEpSeSdZ9NboRVRTT7CY2qayZVuMH33VYjcL\neovNC0Jmiod4Vy9/jSabt2FX1Y9UqtMtvVMVgFGNuiPrUVE9NkeQvzNtzKp/\nh0DssfyRXrpmsD+irUg4IakzL1frQURt/9TvvzwbSDFtol8dxWz4+TuDGiUa\nCDYxiJfmjClWTFL9dCQydd+n+Ur3lqGM2XCTwq5YEm++TRos3Zg7eNLOF/mi\nQ1aXScyb2HmeEbg2cKoqnqnz77IDifwjPe7P0qFJOe86ounO7A1m1cAg+Js9\nVVIIB8YCczVTPzcPTGGH1qnUNfi4OiHPQNxOfy+f6NfapvNsvM8vuHL9sJk3\nmwV30mJMFOW+Gh4iqPcxDfNX2bmO9Vn80omzkwSqIIP6FIhoDwbW+XSDZYen\nzguIm9P5rb4pBjcchTjWy6wm433zqfON8HGJALCRi668kVqnuSj4DyIjE4Gf\njxZR7pojDRIG40OZl0dP0CXWWesXCBf6DdrsgMu/aokYmzax0w0dvF3EK4b3\ntZzPINyWZWkO/h9XOmzCBJVWtWiyGdZE2vQ+IiHDkUiahCoHEkn0EB2+PsAp\nJsNT\r\n=/fI5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJ8xY5ojnkkKT5BelogC60WqFtCHpTXP/cpRiZjGFK+AiEA8Sm8VpHs8Gw7A+V/K1IZYuuTSwhVeb10TrBX2XpaDGU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.11.1_1574814403604_0.758321355146734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-switch","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.12.0","@material/mwc-ripple":"^0.12.0","@material/switch":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-9uekfwDEc92Ea/sfDNbc3xEjuTdXTeTGvpLZAof0F4FczIROPwjrxpiy0ty318ssJo55CdabPGlT8x8RsvhIUg==","shasum":"fdd58bcb872b26651ab6f31bc97252bd49e80afb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.12.0.tgz","fileCount":16,"unpackedSize":53402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkuCRA9TVsSAnZWagAAV9UP/iMXLCTkXkWvNFeGsaiL\n0pw8xmgv3UrZo3cfkmPUwE5zU5TxzwZy0ba3fxex26qa/r49dB1EvQ6jE92F\nOQ0/93CWtiCH9qipsGqDmKdwy/am1JyAIwRxdtsSV9OpxaYeeGjsHwn4OPn0\nzlDR4uqkU4Z1fA+H5zVXE7nauENeM1Av1o9PBxLdJu61CXSKCkYAZS8KIdDa\nlMwgre9Gw1idVzIqWuqBk6W3zuB3hrYDCf/nx3Fu20h2v/n9OnV5u46P8JYm\nexkqO3NtsxMkpn0xb+JsbFBnU1XP65vpzUC+oEvJB8tteylGW/Z/MeTDHBpD\nDalSAEYhm2rJQvPUTOheoOkFBrTohgTQ1wbx9RaK8UuZWtXuH9kGvXWuPyP1\nN7gGPkyExOJ72wQP11SVQx5Uwohc9RiQeoRaRvGSpKcOAIPmEYMFJhtndv+W\nZEMQPOvXdwVfkaCQkrTVM5IwxTt9k0xT7GmGlJB9tcjAfj4QYYhFF2fTmZOz\njZlqPfVHeYt5FTQ/sUvivjfaoCUPVp3K7qZV1pm12Zb2+EAiDBIYBB9CGU6P\n/FVPmn/BpzauwVpPps96LeuETlzbsjqD4CQcw8tZSZCbIu0pf6QOkWVt9AxB\nxkp3t3ZGrmwghmeJr5NJO0njC/JF5E7uYZn+f4l7o2ovmVJUM6g4kIRwbCPj\nx521\r\n=wmDh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuZpudOMXjNzzTaj5jut7pYRkSwcdt1VentSruqbGn0AiABNYL9skVhBvxAojr9YKN7jebbFcxSBzt+c+oZvJE3fg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.12.0_1576626478096_0.8201008948999431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-switch","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.13.0","@material/mwc-ripple":"^0.13.0","@material/switch":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-Oi5GhVRCae690Ja6Bf5kzpj3qFYpY12YOu2jVjPm6fgNEQ1hBmjk+aPWvn6NyTE1sW5uYfBkASqUPnpnuFBAtw==","shasum":"dc5f28c1df108c66b322c382793797da2468d120","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.13.0.tgz","fileCount":16,"unpackedSize":53854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPcxCRA9TVsSAnZWagAAns0P+gLC7Up+nk3LYtf8ZImo\nSeaH2JLWzCK5J9ldGg2GTlTo+a3RCqLFeaPhZ4GKcoyewjZtgHOPOg0OM4I3\nkTzlZ5GRmrDMn4gAzptIAiNqHWZqqNHgrZrW30zphZwpTX0gZhcwkii7u7sb\nQ8qLrKQw+O62pxDTnft8yBaE4fgEfvx+G2VuFrRNVGy0DlbcDkJWNfJa0RML\nSCNSJO1crveGGaIY1GDmhqfCaHumOsUfGWGDCHzHFDbn5yzg5ldg0/iA262z\nhjbQa3vvADZvTUu55OLvjpsGlhfHpyWFNHV7TlEbPYKgXAgcfJ4UVofrB0Lt\nwJZYmEFZXY5RSte1LfKjzGfQMutOmHmPagTcqlsrki0J/pzpAIunFbvWP3bR\n9rhwJx8fciddmQ+HCi1jlBw0pPUqs/5409qU70Cmv1bz2+/CSO9MnEyzy6+M\nDJlscBi9zN6+F1+WJgm/nb2TKutr3t0QpNs6I/R0tMtt+m/JXiKmN/ejYUjk\ngAPtxdL0lvH/ccAszKcxFV3s7SkJ9MR7l2HixEeLNdF/OYiHwEnw6uylY8w7\nGbWmW2c2HEH2IORpO+FqAgkMFYM19QRZoV9+bE5IhZSDL+gkpnwf9qY1urjO\nyiXKy++emMPCz04tP4aYECGMbSKt+TL1hM95Ccg63R+NIcgjv6xQAih4aSQk\nSN7W\r\n=QW+Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCXh7sbPor1j8D2KsvrLA/WiolCr490XHuqcKo0uBRlAiBKoHshdmzbQpos4bQiwebjUIn6cBKZzFS/JNHGaEtJCQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.13.0_1580791600885_0.022453131624955658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-ripple":"0.14.0-canary.f790f713.0","@material/switch":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kQb/3X7nyWq+C8YZFUutytogmJrvcTaEHgO5Q9fjm9mwzn/Wv4gBSDTum6KMB2PVS4czedkELH7W97woPB8H0g==","shasum":"fb446f4931586186d5fe08e13e6b80ba8c7473ce","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":54071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrNCRA9TVsSAnZWagAAHPcP+gMy0aBJ5aesAIz4W3Q3\nEVbZYgNXuU2wbsOJ1BEWkF7bnFBYGU/NN4v9C5C9oD/97memyTUIfOQkCYJi\nRMLs400q53JVhW8gVuTwQpvqkqoKboRN8e5hcg8/gC/8/FZZBL/CFJnPVGyJ\nyoXr/RYVdLX0mis2Z2/bcYFqIc61OZ4mzYxYk2npLgJoAivuA0h/SjznHqLW\ncBg2u3aJwHAuYXFlMxN2ojn7ppadddZb16s+4EO5Tng80I53fbtIaZjd/0Kw\nUy7P1qqVUpR0+wAem14cCkuLyk9DmI/GZdbEZVlDderGRd81MipoK4uXOxym\nwcVqLv4ZR7A/kM6YPv8yrAu9Qj3pqrEmcKsQOdpdKlVrIpA0SQA9CInXCW8Q\nfbP4hr4hFiB2stuuFlA9pX2kCM46HdCfL8JOql3qvdzOR37YdyTE7Y45feTI\nwXlljQcWBaVgsM5rCxv5+t9kMUWS0pcqF236MBabh7TbtMumhgoNrlMPZsDW\nBhNj4d3TBH8CQ5iO0bduww4JSCR5cCj8d7deWPRSfXlR2mWC54whDanghB8F\nu6LiVzv1wIgjpG2vv9qHttK3wWsCguIYHP+VhJdL2alKx3JoIAmJigiqsveX\nUJnyr7+TbGPYbA39qPTyknmzmGUgufyklvDyxU+eAeTihy5cqp5qB6TDPBs9\ngx4E\r\n=bQGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH31Q78+VLZndVYZyl6boEKW3SZhzk1rSVTwSTcKCmxAAiEA15QCH9FS58ZVAVfYMHPr0/WBSFwAKDVywBX8HhVizIc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.f790f713.0_1582856908834_0.653731042862872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-ripple":"0.14.0-canary.c759cfbc.0","@material/switch":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-riLXbG/AlYVUmOM7xL6DQnrjeh8B6B01cYPX7mCMbXwTPb7YSxT0hq46NnPwOp1YJsuI4s9JUVpVSp/Blmjh9w==","shasum":"2211b4f51a1275c6f17ab15d455f0139eeec7f26","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":54071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaq0CRA9TVsSAnZWagAAWlwP/Rm0kQ0wZDWogdHT70XB\nTP+kTmDTPUdu7vLZBU8gMT5YEEvwuem4okgYEs5C8TgOi0lDF7vx0G989tlZ\n0lJ1YaLWy9dDDn4Ax/71dOBuv4Krd6GZ1GQFRCPu4VEzlm669hxDAEyfaM59\nZ0LX5qasnZat5v2uOO0YvIOHR/0D6O2LDAsXa5e/Bj+SEwunQ90Z4A+f9Ggc\n0yiFPARs8xly+hFYSG3whpoRt1M20JIdLxKXr4hvvnsY54slqm359rCUWXK5\nP+jnlx3Q8/aQoDtczWNokEqIguSuC07fDpZs2JitTpfN1NPubuUG1r60u0xR\nnms2/40G7zdLc4lj/6w4kVGTpSaz1PrYFEHpAIsE7QdkZVn5IgRGiOzPggAa\n/OQlJVpTsD/fyV6LlhyeYGeUqr6cvMOtTKx4PqFXdOYP20AzxyY4Sm3Z1Cd0\nVmN213kTJ6SJTqzREHV7bqEK+G4wJ/STEW/s8Ib9VN8tFkhNeC/5O98JERhe\nSBlo0GkxxPlLgX3sKSfK2wCfkcR0JSrP2NtDhK2hloIdgdYuIOKvzNpSkS70\nBtyanG+dvW8Fic+TL9J5MldXydQ9Cw4Vjzp9DIvu6GSClAfxiNSPKygaoiB2\n4h8PkUa4CNyMyHl0MmWvHy5EsLkmRAAYFFzl9iDLzz7Rf6nYjIq+++EFROH5\nXrV+\r\n=4y5s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHqVBqIDyo/TDc9B98FjoGXvTWbU2EPRQ81RaFmEyBlAIhAIzeEuGd4Gsy8gALmtm0Mil3tNxMk/I8gOFUUnvBsvjm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.c759cfbc.0_1582934707831_0.4917830488092563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-ripple":"0.14.0-canary.97ef53d8.0","@material/switch":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Mg+slqDU7LuwonHRx/xuI8Wzdf9hyseDU5l+pAXoEd8x8tgxAtVttq0MuLwrLxaaTx++qaGRkW5QruptdZQUng==","shasum":"c6b926e4b145093068e1b9392dfc52df24be7797","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":54071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3ZCRA9TVsSAnZWagAA8v0P/0CkQbp4xng5bOzYZPa7\nseE72K9DBF+G7FXsPF0BLKnU8ZL155znbF25oNdyyYbGXp8i7RMtzNahVZQo\nZy/aN9vQ7PMipmuCDXu7YpY9kRLdUKR+/fys+Dh7ShnZP6jshI8XlVHcedWl\nfdCXxsCeE3SFLvgtMWLHKZQwaz6nH0mEUGg9hAQ165IJaVkDl7f9bwcyO0uF\nqs7qH+V/RdwO0C2tgdlAjgZfSO8aNnYVbDsdRaYYvVTN6Xw/9GR+/MFsCpse\nHoLD4jwtjxipOc/GX6B4yJD0YXaEzEZO39Gjn8EBcBWgXRxGGx5pNOK02KnV\n4okMnXXpFgapPWP5HGCrADdA2qDhbqyoUk2MvHjURoisW7+1ERR71cacLqlM\n9IhXRsXQkCENqxJZPTDV+HzfPSFiwvqx8NX3wPj2po6q8cvPkmmb4qbhUBID\noLkcRjoPtQIWp4CK172F6XZcJ7grp/JbM4jDXfqVERz3wxoolTSYfOGKYSTj\noYUOPNmYyNX1UXv0gcw3y5JYUtcqMaN9mFRNadSr4532g4sNfHBlQrgXI7mN\ntCq+AGhI+HJaAxusiDtDcKx3MFkzQq5QS5B2skwLaAkpTjyZvZfg7sR62SVB\nTG3ie2twx7k1DwyHw2zdW5dazQmjvm27lMJ0jm70oifQPkxIuecMIlIlA8mG\nCaOo\r\n=TXj+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQJkIwNPS34P4130JHMo2GJDHUjvLOkNu47f/6tLURsAiBTN/f/Gs4ZHPN3MMR3skm4dSZhjti091hGY6xb66cixw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.97ef53d8.0_1582935512197_0.2698263429700618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-ripple":"0.14.0-canary.24f5fa6e.0","@material/switch":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UM1eZANnIYKDGZfZlEOh5NgReiooj4V1W//T4SLsNEISEE7jin1GJC6VPZmCa9npF6Q6hT8sBai8pZFdha0+Ww==","shasum":"af7d2c0e86beae933a6ec294a72e858d91c3e530","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":54071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmqCRA9TVsSAnZWagAAMdcP/06uynYZsCP1naYpE7P9\nHg1jsWUcXDUjqGAhC1Sj9BBK9eNBSeWjbek2Mw1LwxbXxvtm1ow33FpWWjlx\ngMCDdDbd5up7gwjAQz9HMsqmBm5lWiY5yFU+z6we2qYonQvhUsRI53ksGEZV\nnCJzlVWAgbs2hCRmpE9cgX2Wr7fPqFRY4uVSrBUZlm3urtnUx6HXPutWcgwa\nRp7C4xENtV4Mf85gB8wetaz4qj68IbcA9zhvX3ygOVxuKdXzL4hFFKtjn0Qu\n2wGzN1qfspQ/8sfqX1/mvngvnJ5tMTAEFtpeJ17hBd8OlCW/iga+iGWtyFgi\nutkk3qJQ0VjgaQRgZV1bZPlgygi3LK8/GZbFJj0ch3UGhcy1A2yVhKbYjK4y\n8nsl7MC3R6YFf/qli4DOhfuoDkeyBhy12MJ8RElEbquU23dN7BK67hwBSx3y\nn3ERdHSp2rFiAMzv48/ZsfM02DaXud8m/Z0hg3VyarXCgtGdaofAcipB2Ga7\nIPr6+Vdk/q2jZRpPKT41KagGjaBdKxfDDaFW8KTxFbr8fcKGNBHa6pVSO6hQ\nSYZa3E8uvzFULu/FmbZf3K5vVSkySDT456gHTUxeBlJL5hMz5GypAG58mSC3\nrZ0Kq+zE5a5R4TOQZHemDKTnw/5fQ6S3/9U2rZ/weAtYGkJG3hxxIioXNkcF\nTIDc\r\n=9fgA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5LMYT8ad8aJmL+CTvkDhRLnrFBt8VRlbBcQ0KdyQ7pwIgGx4BIgS51S3Por/ilLhm7LAB07anWR7n9MaoMSWimBc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.24f5fa6e.0_1582938537714_0.9198677892494798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-ripple":"0.14.0-canary.960e214f.0","@material/switch":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yFBeHpNnbS26WmcT3Q6jPqzIOvSPIhvq6MhDcKnK6TIqobPIpfPchoQ4mxvKIXQlxhNPbktKmDLLtxFkJIu5Eg==","shasum":"22d05fb14a4e4d4912a79c77efa377bca492b2ff","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":54071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXcCRA9TVsSAnZWagAAvh8P/A/yzRy3grpL7u2C2a36\nq9468QSE7a/aunAoFQ0SeHGK7jlW4flA1dztLsXtbiTD6pv7JTs6CsC1VnaQ\n5MTxT1+JEi/U7h2c0wllVHj3pUINkZsNrq6WTD6/pljlsI+1mv+yzA46JGZT\nfSl0KibC7kE3YBWSbZX9bWqhi1+KK4v3m4FXLa1GlPHe+P7pCTR+yiyBPpwZ\nvNVXkFHZExKhHfwS698DfclZpGixUwMylZMhA0VvOVtJqoU1igNvQMj27p1E\nSdU7bmehpc2VlPxBpLujvugNwbAylGTQ1by3lbOEGN1AdMGZtvbCzYKist2/\nA1x9TD45aeQXFi9Cj2+j4LDt59c9SCg+sCMoNNnJRIxtcCoOC7WZI12JZ/zv\ni+OIeHRzig5iW0aTHv2X1qfYeJDebEsSefEOBZRyGkKgfdN8dDZ5Snz2nwQP\n6lTHRXPZuXFGrdJhZY+Tl6UvFLULIh+hD7Qie9kUxk2LLxAz4HOUDO69GkvV\ni6oyUYmfgsj04OMWzTRA3deJ76/tGzCg6GJPn2cSQzsxf57HFNujXG3BPUNB\nuxYsML47rkej9qiE0OrTDRpHaf1/1rPyR5fdvFt5Ak3UkCHU6HcuTT02GAMf\nN8AtJ6eYnIiGF3AbqWYemhqPo7ZKfhVrX4RTGPjONrVundJtqVkwbCubZTW5\ngpNU\r\n=dP08\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDha2tzAxUuw4i0Pr6DEULDMbY1m9ixEokCnjfNG3smCQIgGoOSxvmovY/mkx1CIOintRtqJ73QbHsc+i+pXlv3g4Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.960e214f.0_1582945756034_0.5422149516355579"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-ripple":"0.14.0-canary.a2f046f5.0","@material/switch":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-C70nl9r1TcjrdMoa4wkMXBJEc8WlLo7/cenFmkHC4yevs5dlrU2vVQ7VYVU5tCt63KiJhJfi1SDYwJQ/1N7mHg==","shasum":"caeeed82871b4358316c4b867a1df58c748737e3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatYCRA9TVsSAnZWagAAOk4QAJTKFj01/sk5vYiEiiF/\nhYlN8qhuduHQpey5Y+G7ZdAaE5nQExn0Ub+iv+wbU0LcKWO2ammNhBRSUFzJ\nml1jYdiw8cOgbQVeCNC3J/6pgXMCx0rdWZwZIZAZN7JY8hK+tznCSazjojKb\nR3omOHjMH2xEyOfm45idQD4cBt840c0F1lEI7B33cCKbgxMx1n5wDv6yjAyd\n1KKot0vAs2X0BIH26j1JTaHS15vKQJgN5tce9vE3fXSAbZ+6MoAeR93Mmpt0\ntryW2zLA71DDHa3282MXqxC1H3uY/6Ip2uk7mfiDBJxJ6i2BTOoyFburzWgN\nxppkJydTCnUqkhUGGZ2UnTplBmo5LUei+FrIkpu4rF0vgr1CwH0XsQ4du6KK\nAv/H5m9oHxYP6BHKCqo0DGdYdgio75bjm/NnvOiA7Vkncvl+E9ki21zH8aZb\nZiJYgXlExrx53hlhU/yXQivaP+90Asf46dENit4kBIcxnQRv6ik11+pLl8MK\n3N4nz3r9rYpUMlgv//1rmsgkdcSnW77Vt9pd47Tqw4wVbEtM/V3S21hYYJHM\nWswR8aaDUZkr4PnJfm/gUXQotobrJnRcE1TK9AJMljE3vR5uLHDJmziy7c0e\nCYx6E/BOQBw0TXTPPombUgSZFZ/saKaElI/tNOCbO32CdrG1ET//nPWhSnP3\nTDYN\r\n=eL8q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxHlwv9ITb/t7kY95squH/XS08FDiEY6ohAGcIcWB3JwIgDUcP58VgF4DIoMm0Rjkmj/qVKF4sGCt4nZC1fgNFOgo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.a2f046f5.0_1583197015524_0.5536807945028801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-ripple":"0.14.0-canary.024f371a.0","@material/switch":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tAri8Es06vQO+NkQXGu7J/WV8A4SQGYP90duhR/CeDbqVv6x2M86n98ONWmICCXP0YYSfWA0s1x/OlMdZTqDdA==","shasum":"1453a7e88ffe71d633a28c73f6256ce7666a3268","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLlCRA9TVsSAnZWagAArboP/1nb6pVj/iGWX49mjTX6\nEcpq7Yn3vq3QGO7xTN8G5cc8XYaHi5uK1CJ1sFhKJTZvBebtIZrbX1JwBPjb\nkj8Xy7+qnR91pXE4nhHP9oTch4OEbUJfn9ksJRfS3YnxMRZrLLmQ308Y4s/+\n4El2z8NuXVw5+KheGyGCLZS8GmYdBymymr7ECML6jg0J8rlR66N8FO3f7482\n4vfwy+sNtHAkkXuX8qIpckYXLoniEvGvwoi7/WUDeCc1/ds4xl885118SrF/\nhmuiuGXr6pF5DdxTuEKam76LuKT+0hvq6QKSqj01JyYEgEO1Eut8lm3PXK18\nTu+g/K17NWLbFzftKldLARV2ISiyhtPenbKCiwNvupY2WCiYidPx/zEVHCbu\nKyF+PpyTdamxsuKIen5It3Dv2L+QiCwUx4fAI3yPm6vj6FbS7thBzwvhhtWT\ni5ICuq6fXHHnQ961NAVfV3rclqw6b0asUAnUWj5k0RflzEAdzx7zGaMOEXwB\n79Ix0OVuV3FYdJooQWbblsRriKada549vttccWQlMZhmnBu9yg+OEx+tILxr\nCskxFaODhO8KeHDccXByFjffFwRaMByAceVJY+kbikP03sVe6ImPD/M1pLYz\n6vuU02NsdSs1NFYLObu0nAmZIMHNyEwILNVPhZXyNgUT3BDdOBYbp8AY3SGF\nwtnH\r\n=wA/1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgnts2wa3n4olfQI6hLmswnseacseJ3ZK15T1hthvFCAiANdCEK/U8KWbfQPk5gh9PcY6+pBQ+AjwEf8vH/xkq1yg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.024f371a.0_1583198948584_0.12725376272229094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-ripple":"0.14.0-canary.2f164110.0","@material/switch":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-W5rTiRizvH7s1TSpNMwwN46iVNSjpFA0rI2Cz0Hv+TPZSrWlZx5bEsZd43rLkZpbFPt1+17P3ZBqPWjAGlIJJw==","shasum":"e33f307be6e0ec55b71251abcd331aa6a7c605bd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1ICRA9TVsSAnZWagAAGFIP/1ORJ0BjpC0KpKoC1L6Z\nvEtfEpU71hbqX6rPGMpjW1YRUGLVwSuP9WwOLWOXYken6WilJMqTShlulA0I\nAJQKTJ+t22GzVS9gzJkFWqsUgOssQGH0U28JXtBWIzresrxei/6zJ2UmvKMz\n3+6jQy79Acbr7DyyvlXsjzPsnbi7C7LZA+/KHnvI7mfMTv5paZtegTJpq5Jk\ng7P3pSf+8y1+RNTYR1ZbAKtYAJGTpa647eXAOI5cMybDrygNktq1LKDrIkSu\nNHmHWINuXj6VnI/jAx3qnkN/kA+URf45HRKKSe851o7ihjJumyxefaYsBmO3\nblFTJQtqkmQViRgUZTSvO6igEfD6VZ6QnzKuhmck/lP51KoJK5/AMGhcDiMN\npbGd3bzIKKXwLo86rq5b9+eqPMMkDEllNaR/vB1l+lVMsTX/PKHMgg6g7SFH\nJgj8+eUM5GPCbFrKBlKkQcZb3MaQLK6jWz1jXGcp/yPfngKJsE88hWqrllEi\nZnplCv8Rt8nK7jPs++JFM/cFxZYem7siv6Z5r38acfOXkdh96oWo8lxZqDPk\nmyJEoV2zMhntGYpF492RyKvKXzBj8SYkXLjplvaYLnVq213DGfsa6M91yDsS\n5gju++92FQRm8FZCNFHABbojVySthLLRW6gZQLZYUkg9tVQqyi+0XuR3BgFS\nnUKJ\r\n=OP7I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHA8xTSoCS916ZSCw0ZyOzn07d3J7fdhkAsu7oMmI/bQAiEAzDQbMM8gRYIvHWI7XoKEvjGTAHQIoZ7LFwMhatms6to="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.2f164110.0_1583271240240_0.7475544619504029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-ripple":"0.14.0-canary.edd465cd.0","@material/switch":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iy7IJcGd08apfWbhSHSQ4IbvW9CEvau4DKOLo9z1DyYWHNwYxq4nHeMUBh6LDA+znTiIfQHvKD6RnpeyRKyi4g==","shasum":"7d14af86f95521945a0261149f7356a341db6c34","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIPCRA9TVsSAnZWagAAifUP/00K4nAo1Qi42t1mWcOz\nSmPIiamPHT5KzpsSamUpeHgpixdd0fe1kjXx0G/wmRutYm2+Ebx9cUr+w5uq\nZjQwvgUFJ/XGrioaySSL5MKTXPJvJMnBeGSWB0/xRGDG3EYFC9SvWtQ7+p49\nmkDmGXvAWA2ld3Yr/qBC/N6qCieRCgc8mg9JH1J82Td3RyKbyZPXRG4MAn8J\nMOfhaoJPkIWC9BEM4tdpgVsvKlwmw006uf9shnCoRLmvfKyhfJFLQQpwT/5w\nAa9hhN5cO3ylDirtPqWJ7iTE6m+1G8laKtbeP8+GrrSSwu3peEzMc0Ut9B6h\n0MYkvuhlUbhRMhHCpIDLRcJGq3ck61SCIZ/isJmEXSpxbFvkhCXuQlBDYBvw\n1mcmSqeCMUVseji6R23eHiQ5x/AoPOh5ymhXQjwz5cSc3KN7K00mM5BgHzQo\nasgWxaNOcvtQHrVh7g1ZBWFUm+oWprKzunzepGcP8CbTqJlFZJgJZw8ecM/4\nRaef0LuAJQur3kzsPwXwBZsOy7TUZRNGl1hG5pvfUzwlSGNJKrisOnhvx95k\n5B0rkgQ+7vdDc9veJl0XIpODrF5LBdaYX/0HhXviopOyInyxfZ6pz8hTKCih\nz8Mve28JqeRZWIw3fFwt8Tixzp4IhN+QtkReaNqPgNh0ugKUUFmwo+Wy4M2p\nip9L\r\n=2AZt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXzs4SzJlgYV9a1O4ficg1GStzsEURQG34pWE8G4n8uwIhANp3fpaWnifuFK1Z082yMwvpti7t9shsY4w4yhOwBrEO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.edd465cd.0_1583280655275_0.8264219697850483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-ripple":"0.14.0-canary.2b02d017.0","@material/switch":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VDhc01k+ZloKe5xZJNsvNuDISKyXwW5fDS7kZCtwmI/wBIbRh9ldWOiz2YU4mXwAuXUmZClFnVKZkjSQm2DNZQ==","shasum":"80d54e0951d75e8906b9e03d7412a2e4c5df1f3e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1LCRA9TVsSAnZWagAAgEEP/1+nxW961Nh9Otg7dW2V\n1UhHHrd8/5eAkEv7GqoKVGALNxHObnUiA2iBGepmklenLYJSFrgQjFCkUudn\nwGIiVlYMLm/Q5pxpc3/nRrNUAuKfqXPH7A3I5yD5ExP5J4dR8P7HtZIGFXpX\nfiGc/h0wwPO4cGD5CeY86kEgG96Y7PyTyCmhiPxRsGGxaxv/B3HSb1LnIafk\nvNhq+uI3M4PjX5E3Sx6wQeiAAqYVboklMNEJKn6v36Iqadc4doCc6jKo91Fv\n6e8FRr9QItZBsqJoe6T/Iky0moYhKsbsvyX1FjAdGg4rWAkRapQN1lhcRJCm\nLMmRuWUgnh9ITC/s0Cwn/M6iI4Wh7d3ZVHk3sLanhSxzv5A2cqMxfT1s95bG\nxRsTh5h8d1Yj5pxdUxuTXGMRq9A+Wd9BvaKl5RMovVsw+J3pR3UD42lctsQE\ncLBMJJ4BfJGGmrtyhk/ytrLOplJl9T7vkavoe9bM/sOTZLLYnBX4l8nwVIzT\n2AcEtTTfqpLTUTEnhdbgcc7p531PliziIW04Nu379JVa/XfTTkpa5RrSKCc/\n50OlfYE7sK923F9whtftWUpOeDZHLUpNP1cxawVX4jZ5CP5CAHMXN3MYoV4u\nPNVZYIENICg9weJgEaSHNIJJCjb9J72McWmFigENIQr7v2K9UrZKNbVtf0n9\nY7gJ\r\n=nMEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnSRxLGUT+6dphjCQcY4xQovEhfryLqR46Rp8sTf3JBAiAWmI2MaGtW3+CF0AwZ3hBdzUT8U+T27lSabpGIMVs7Xg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.2b02d017.0_1583353163316_0.3060728449294281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-ripple":"0.14.0-canary.cbdfe453.0","@material/switch":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ToVTpgNJ/KzKZ4yHcEGyRmF66v1WpTxJATtl/TYkOGJEHP45WcgGLBN8dWUCNG/r3TjWAnHyTTOZzUGBC2crYQ==","shasum":"e0bf4fe925b999a82b30e6e079247e0237d327fa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFNCRA9TVsSAnZWagAAJ5kP/1jWOAwV17sr+UfIVwDJ\nQy/SSc+fiSb4PAuYHkiaw0+vf0UjeyIRMrJBJtvKQ0oqAV7I/PLUEfyspy3S\nv3u07CrhD/mCV7jp/1/FZCmOQHYk1NptWvSF3gD2ksK8gvsUsDmayNJaZlTQ\nUvf2/0H741xnHRs6v4dar0ubfHDz/Ixjcx+o8yoFeuVz3+5wNqkZLq8YTb3j\nx+WNww4xA7Rj9R/9zTd3twHolwx81F3CtVK6EE0IVaWQezDnHW+6gwyInKor\ngJTRosrXSEmD90wM8ZxKo4YRxM20q0knZfIPoAaKhE3SamjsFw6Uk1uQYxAN\nz6CW3AhCN7QoMAuhPrmIMpxIPBJ7qvZ0vYqZVSzZfyI3XHKi/5cc2AIvMtze\nY7skYev/kdfvqw894iyA6+byIqPIPcEqG1oLmdg0e6BnurJ1yQNXwdcFQTAr\nAJT3sEFQDE42zxknSrzZSq7K/uxYTulObGrFIXrSUgU9gW5M/3xxWkMnQ9IC\nVD5Hkbhxw00GRSaJpljagXGVQByvd6WHImzWG/c6vmXk5oyCTsyvTPJcADXh\nOEDD5MSrxhrBwGC6hNVgZlpx3gOw3QbJiuOurVYHcJUK24Ka/1IV1uSkZqC5\nFr2WyODYYLmhGwmA9MZrhTW+zEKjE/R0vxVJ68fqyG6TYcqfoDZr+gLb8R0t\nq0vK\r\n=SQ7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICc1ik0HKGO2GeQp/6sI3T8mUIRePy3cv7aQTURy6hWIAiBwbTpEN2bHURLRve6XpKvIwxV4ytElFYV35VUK8Jef5Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.cbdfe453.0_1583358285189_0.5721891233169698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-ripple":"0.14.0-canary.02aa8a98.0","@material/switch":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UnoUjWcl96eUeGlog5DTbfO0so5sgVSr2miSDNShsKObH2IbdQu913iCZPuiCVgsjZJPQCWeifol2SrUe0aUWw==","shasum":"92ed3dbb7a83a8370661759ce030fc8d2de74486","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRzCRA9TVsSAnZWagAAWloQAIdG0VwWeUeOqhrWpxfx\nbfYn33aSxJk5Te1lN9Y7cJ9cs9FUmsvm4KP4t/gl6+WyhjZEM1n9RA8DanmU\nnbcCEI7cKZrothIwNlU+wo9FnsU49qVfwh8mcfW5Ptaw1pdhCxD1iCEULaQd\nDaWb4xJ2AUbpXwBDywbw65NhyKuf3/FO4n8Z5pQR6lDSHjyUQu06MDWQeznK\n2zQHKuawraxBi7agwfll7Tz28kxeWSgTvgxPOTRCavh6aDMraTiDSJTxyIsp\niB5qwp2bnwTDx17YrLElI1sA+4WWpzNimbSTn51ASeC4nDjLPV9ui/bF49bM\n7s0RQWrbsdCqVFBIPPCOohQbb1cuFFnCGsxxt7QllBdCe609xkfTVuHL8p7f\noQnYNDrA/PQcdMnjX67ZCxzdu/fkyhTBQX2gupHz5L8p5YyznoM1hSbR49ko\naKW+gzgrjVqI4wiKxvE+PMOm6afD3e3HRxDX7l4g2HjcNkLhdt7uNykjnnPk\n5nO2aTOq3o0/uIhlcPpC0OSEtJt2fMDD3Mp20cEhX6K0KupilU5ihW3a5pw9\nyV+pxAxS3BjY9ROitE8n7/LTZDezolMkKShQToCPf2nQiEB0xDjW5sR4K9oQ\nFUSHuugJrrUvQq6wUVKa0d7fJQ+1TQh8csSUF3NFWsh9Ml7QSjC3VYMdnm6G\naLwD\r\n=SR/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2oR7rf9aHUirG/oxSG+wIHuVx0z84+i6KhwHt+r/w+AiEA+5cE18qZwLNidGBUgn1bo5+fDg2nrW31vbF5fN6JgVY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.02aa8a98.0_1583535218865_0.2172940645832191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-ripple":"0.14.0-canary.7cd5aad6.0","@material/switch":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CiFrzaSqCewT85OVpNY3G0AlUXX/dY9bwUCdn/SNOM8+1L7zVlYOwpp7qO7PygRo+VBor6pQzFf05xKndzpnvg==","shasum":"db2ed7e8b636f2b5ad286d382a2a4e510f14181d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs82CRA9TVsSAnZWagAA2cEP/2cySn/vwGdldk9LmH/v\nZycsMKLihh/bGLNXUeLL1Nvy9MTgWLV5AVnzkBQE40q9nieM5+tRziJVGfyG\nDBGe2YE1//SW92P2rN3d8ueifBGHaSQCnBGvArZ2BzOW5kyOWxAUi3f/q4po\ngCfBE3N9peYW0qAhzfkjupSSGYiu6g0115jOWQze4+nVMPDpbk3TkxR5q8cl\nFJzhbnbUoBJv6bLmZuPPm3CBP3p17v5e7dRy+DFbVGnuW6ASIRCktJuk1Pub\nQ1mAhYuubo7u2UjB/7QTFlPIgOZ0kQy0oC59977GsBUtWgIVGZcTelB3HJ6o\npJSuUN3mf6k8owvQeGMIXiwBzVEz0YBmAW2P8D9x8khR5HAr3d91t2VK85vp\nyYyA7527fIqG8dlGOB9z+gFxyaTNeTc3j59ZhWTIh7Rtwcwp+dIHvYnUKK+l\n0E86B04Ij86OX3rc6OCeuR11CEzTqSt1GhSda9OGALzDDKbpA6wRrXtCwmYf\nGaGU93WzYZZQipycrtYcpxzz++ES25V+utOZLzb9zctyv1qpg1quPmFAF0Uo\nCTugt8u4SYcwN3Ob3aWHFx/KYhLavzfcsomKU2Nd0G1vxnO3GnA40YeFzoqb\nmiEwmFO23I91zxxw5CDMzk0pGucq+00mgBvV1kwyRVZTOZRn4J43cFVTx+xO\nxpGC\r\n=9xEN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDurxkt1QuMDIwZ1jWuLsICspZ7tIGG3Y21Ium/LzuasQIgek4u0P6EINP8Ti9QOauQMoZFcPjKle8YZY4Oca9Yy8o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.7cd5aad6.0_1583796022540_0.2935599089224308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-ripple":"0.14.0-canary.3a79dfa6.0","@material/switch":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OpHBdCEjhgdHt+LcdDs5u5BpSF/tsbGD4w1ZobzOeqko66KEAR8pNvqRhTlkCBqF978cyBAKAc/H5CpMIArbLA==","shasum":"2ae7190ae5ae1439aed44ef26b6516fb070a90b9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHdCRA9TVsSAnZWagAAVhEQAI7ZlZFU+xh1/R5mjjjs\nAxJ9MqnvP11EFzaz/zS9dP3x4j/3R/l6Yqc8ecYfIUn9thf+p+9MonyBmMCm\nRFId4jYaDYYB+99ZrK8SToM8X2MHwCqPrH7gjmrr28DZ2lx0NCRPTTMFDWg7\ntiaJc7A22t6tf9a2uNAJ5JkWEo0NvSCUBDAGYpYR7NFZ30KU491HKwArDtwI\nN15HeaOYdo9svENjE+dsla5qdHZDeb7T74NhrnxCun6xceY/v/rZpbt7QGq3\n+/DSMKHzeHqzYW7qp7jcrgkFv/8087xeBd+EvTPvAfinB5t56jEnARP2vExG\nmL+Wc+oSlSkY4K6vnuLcUm/bzsgfH+vstR1K6mRb2VL61FdUvLAZ3hsnmV9N\nTeR9XpTvoxrQlnzUcXZYvaduK9u/dz1MbDZJs7lNsHnegiQohwpY773Pmf44\nTbzb499V8mu1xIDh/A2b5OE3INylBcAVt8PemchLz4i/tHD+xRtdsAo15K7L\n4s5Uqj+IMupKu/0BReFdYUXwz/XYvd8iOjEX+cmvDfvZMQoEKOrcxjRq66y1\n8jfGmZHnSnQwenxAAxHVZ/q1xheA4W/zNzR80li/8kXNnVRi6fG55s0bpI7w\ndf+pwqs6agPIiUAKmrXZwtrJHCE7OQdNlSdYuoL6WfWNPMW2fuiXH9fU5KsK\ninv8\r\n=qfgt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5j9SjIfAj7xqcu2AirqKSKXFYoR4aB+CobfS6hK1cVAiBlE19dsjF0NimVbU6rXoUo0ol7RBBK8A5eLxfLQLGYew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.3a79dfa6.0_1583808989602_0.6664423919661204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-ripple":"0.14.0-canary.22e0f5c9.0","@material/switch":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UlXk/m+rzDMFE4A36QBHd8jnSdQIF1uklGNolgDfsCjpZStT63lna3FOp89csLrUF48MQhrZlBRzi3TtCXu5Ng==","shasum":"01b52d117e7b895c414c389728776756695c56ff","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLLCRA9TVsSAnZWagAAZPMP/i7Gy1m5zB9zwzW46cvp\ncnXU2LTeOG5ZYxBKziy4DSiD71zTELGBb17FwfZrrNsmrXygs/BKF1nMXrLl\nvc/44Ufc1BRK5D6oeSm8wcqLomoY9UYiz7BrH0pIzJjdsz6xqNr/5omT4z8d\nnxwRX5zpfBA9YhmdvZgrnzwKZ9RHMCb9X3ddnFOpNqKMhhG5VF3iho2c64h2\n23IrDUPr1msy9zWUnahoZRDsaNd1EYd/Qa+fGknFxpVvAsbEI6QWbmhQxqc0\nvshgMT7f9LvtixUL7KEaDON4MOMekDhqykKaxzvDs2njsqdF0yvUIBwpEisJ\no+P7gM3l86EurBR4gUo2s4iGVnhp0vvBvg/AQyP9jWI/RszBcgY25vDenzz1\nf2rGMwMiUSkLwiI9d5IPqAijXU08pVVrFleE8/EUvWu0SpGfSaylSliQbj6o\nSH5P3M6QPHEFEVMnies0npfoe/fJhFE3X890yx5CLAwA0vYsZ4QuHQQDAMNo\ncbmWqh1KH4omNla/O6P2uIbWBJg46ZaYBqSecRVjXBoHguiiYVMhHHvIWqaa\nw4EvOmBGexZmSgiEVDqaiBiwqRqyzzWXnlwQVwRfjSIjUOKsn9AYy0ljPx7s\nQmaNP6Ua1vgcbDymmZYfdFTB3/nCQP0TkRc1EoW7ggSHUfRzrKXxUNiembqd\nGd13\r\n=JkE0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDj9Z2kRc1uMRGgC/UHfPG/CrsqJgkTFKAZwxNayfAiuAiBdP+vgHFhe64zQLwaEaZuwSG8dU4S4FYi3uIQXx42Bsw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.22e0f5c9.0_1583809226787_0.4095809276605773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-ripple":"0.14.0-canary.f23a1d1b.0","@material/switch":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ivjxnIQCOucdDycWq0/VVzmhMikndps3S1XIP77afcvLnLHleb62mAtr+sRWtdE00FPnRoqCHV/xvl1QQFHUHg==","shasum":"35ce24c07691affe8e61e6f85426180cb899d82c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8PCRA9TVsSAnZWagAA4igP/0FESORoSrMlwoZ2esOL\n0rmJdmP0OgwuxUlCGr3PPQQS2TRzRgRutVHsbOdswgXEwavFtV64q+E0xrTV\ny6NE6OoQhb5NR6XVIEObKvqlyiPWnvAaKxSljNc9jKsxpveyATQ0nPnuOHR9\n/mb0g91YbyRK5HXTO1MsCIozR2e1z1TQFdL4jMkKoymhoXWa3XqkTKbFMv/v\n2Zi+Us+MaofpkZnnx0PTMZiWLPaj2yFDqkdhG0c6ctdIAQfzQny+2qDibGhn\nrtqNhwEmEZTj5wBEJ5TA/JX+Kzbd3ldijjNzn954qgmxrDBaWjCA10A4o5us\nDLeo+R2E+M291R27PpiPO1Ub6z2IfenWSnJasHfyAHkjZ32k9Bs4K+zaPehg\nzMr3oXUkGkDbGDvRmI8EyBbnlPKJMwoOp4nL+41bgnJWADEQhChmfIV4pCmy\nmaYgkkSDWsSOg6WU85xyaEbJLtXVEc6ZUTBaDq3lmij8bL3skCQBxqk4fH3E\n65CJcKUXsumafOtvlpaOM+pVtdFD0Ww03MrILb0z6E1TkJq4QW7rhHYGgUmx\nRpRL4Ri55BR6sw6RQUe4yI2r2Uk+zrKYIttLcUyn+oWuwxwMewu238zwiEoV\nizc16EqUyw1s3p+1VaQmInqW+0z16u1IyIvRFqPd/ZsWtPT2S9aBoZPJy76L\nrWl2\r\n=rWxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfZep2BmcrG9CUzyKmQ9iKRaBQkAiaDzbXGWond1nH7AIgXuccDxXrGEqLDoVYNGpWDC+whOa5jpKc+dCBx1MoDMc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.f23a1d1b.0_1583873806719_0.27717104504636203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-ripple":"0.14.0-canary.34b2d69a.0","@material/switch":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hjoPjBb2dSpwxrL3zJ8FRMqwhNAuQ3es/36tkUlrXrzrIiAQdsVOZZ8Y966XUWUHEE7wkQZOZx+WayitVXUBew==","shasum":"a73d9b834f32d2c1399bea800d859be571b09bfb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANVCRA9TVsSAnZWagAAvXAQAJbiUvOIPAUh48tZby+2\nL98eJBjuChAcCayMqmDZLSBjYxO8XYhzk6DSEo+HQkXjtEcmNCQHmkam+qX+\nL67YOOB8F5AVGWFkSEzZRf5iWWLQJqV85qHz9rQvOgJJbuRcWsDFWNzcz5PZ\nR1NMGkQsjcvqbGjfu9RUNfSrcoUEVfjOZvjdCZlJuiu8SURCyidH8nAdFhwL\noDsqP6HI0TC6QzdcwJg1mnYgtP+g7rmXEzhwbTYxWWq1SFNkn4ZiRuspKh4b\nbTR96V53p1i98B4W00PcFgsWwH3oDG8nZ6zjAQSLkcRhWZXpUtCCwZuZcmIQ\niwy60TOFkNX7/3fCtRxaXHtjCa2XdZo8kX3F0gVCBWJ85Nb8s499f2Y0Le7M\ntD0oZBzIG3l4jhwQu6LMr3uRoqSxWD7cqSLv97u+HEqQPF9gV3gEOVGya9bO\nboykxxyO/CWAYOkR1oCzpmzl8ZtB02cIkh6clszGrRTzxRD/ufG9HajpXRpx\nQjdLTnIvIDQR96L0XZ+DBRxTvi+3vBM3XrewfENH660UOojiVyYRh+t4z0ON\ngqjSqP9bCChPVNHREoMH9gh9x1W9P48eTA5qZC+cW3LbBTv+4LfnfN/ftEXx\ndmmcol6UDGfCV2EcMDcrH8dyACdnyYLIdBPi3Mm5a/7/G4PwdElDkwDQwhBk\nVr49\r\n=UGc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9MxAZpxsds+ZRl4jkhgE4AfioUljBPngocrg4L4yH/AiEAtEPUhKj+xRix2B0UkNr4q5EtUdz5RFU6/VGQUPRErE0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.34b2d69a.0_1583874900645_0.7676305901291451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-ripple":"0.14.0-canary.dc04abe1.0","@material/switch":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](../ripple/README.md)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VQhIVcpOBE8NyjX92wv/R3CvWlkATxOCl/mfrYz389kaOqeDc1EvzzMtyhoXrQ+rxEldKySuD9CQwYkpwxvaDA==","shasum":"5a28bffbfe18f4a0e77a3ed64a88bd6ab6ed5fcc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":54062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA54CRA9TVsSAnZWagAAoNIP/1PfNhRIWFzEnWQ7MxJj\nShhtiPZXI/KW8Zcvt6w4t49zsap/DwqlVCfytdhkjtwryEGancdvX+vsubO+\nRrxseNGOMTn6DNod/T8HRG1fm7H4a2CwGj9yceGaFVfcohqRyFqjDWxCe/Jb\nDPeG2gEogQ4bZ26WfkX529uJHRGQNM72sJkOAJbe4gXTYCu0kTHNPPQ1ZXhe\nrU3JnMe6gQJSYq3+VeATjtAmnfvuvoVee6eOU2G97yghxPxKo7U3MgyXD+N4\naXo28pKagODy/YrqlH+dZejJVrfWqLUUnIaOUW9XsSrdeY5xx3MOk6Eewq4i\na/nI48sBGPZPRWgf/EoTgyZxalUXOL1dQjFNBCldDw8rS2QUq8DhkJDfNtVG\nFXfpZArLXiPtl7kkKKjFXwx1nw2YIuMfjXKFfaaMClJbCbS+GDsckjwMIMLR\nFpb7A5ENJULAaJ0zFupoxO342yMm7tYXhsNlmJdPiD0j361ezyWp63Wvv9W2\ns9I/Kz8VyGnhk9uQ8U1g5CTQSLQZNXO0ZVDAo1rc9PyGrCtr3tAc/L6MnSPM\nSFVdTzRG7GxNdrYl0445WrEL7+r4I39gnH12IPvzoywXJtMkd6cU8YY5zCkV\nr4qESv2AepEKf0z+WKQuaRiZOlxoc6WxSf6xtUUv8Rm1wVxG3WaSGCMXZZPv\nV0Ap\r\n=P2h+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpyF5BlvhvZcryffql9W/M7Pnm6enBmvfHhzxcVlODggIgRlLrIenMucKko1S0W5/CzN0dXsOFf0TyK7zZc+F02j0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.dc04abe1.0_1583877752393_0.6509237547907774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-ripple":"0.14.0-canary.04ccbc88.0","@material/switch":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IXVsLPdbAT6OJelkBioOUtRrUFTIyMnpgyedcrDe0ARWEqUqAZZnDTPPBzhEK6a+BWjnpiFfm+2I7sTzrSXy3A==","shasum":"c906e3bd240204f8466052e0cb496a65918f34cb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":54144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDI7CRA9TVsSAnZWagAAd/sP+gLENsGKxa452xGmQFfd\npzECty6J6iASHL+arnIXTYbOUjTNW9xABfGrz33ZKnhjX6lvP013MreR1zyB\nmF8drhf/4wgSqoxKh/fPcxRCdRgPL0vJKNwEomqD4ykLWxAgAV2E7ajY9fBj\n1Pbw5ZVp0bHegmQ8LrHfSfjrgMptjUIZcVKutyLeHa5njh9rEJ74zmSQQe+b\nNWAADcTIO6EedjMczp7RJUlYHazWtYSi+jiuGuiS+LVuz57jKSdxLRfvYrXK\nN6mwhmOah2CAfyqdzSTQhBg0/vz2ulKMahaTb4Qz2HYj9Zp16tgpCwJdFcnO\nt5hjSlDNUuCsP6H9+TBGkEJvQqxFjbssxdPN4G/iDBgCmYYlEbmUBW5LZMnT\nRlD7oKTNgBY7LPtGqPf74caRG6UFJC17wwPoMqmJri1kDEGnVgaKCc6rEXYb\nMZw3msOyjTldO2KvGp8b5NziRQ4eDZJjeBOj/3EhMoWtKsifDG+6wv0MJUS1\nxKlNRg0kHJH/f41z8s6uwgYZYlOdrcp5PuVK6gjgK/LipY83+dI9UoMtTpIm\nDKfZk7eH42cno1G3YkC7jpdpFxISEKiOz4pVG4vM0jjHL5MlVo05WDR9mRwr\nPyz1xtuO9ZJrZ6IAoZ+jEjCdckZv4Vvijo8icAnwc/uAtc8XqZOHwfTeCvsO\nA6Dk\r\n=mGAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEraMalC/l2BlIcOb++gTIIWPn8dkOqMyyRsnY3s3pkbAiEA9DNjnjOXH4q3kky+sjH08nVJyI7pycIACxwRA1aMuk8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.04ccbc88.0_1583886907267_0.3206841305566832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-ripple":"0.14.0-canary.55338c25.0","@material/switch":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5KayMNVM/r95MRzJ3biV4TesBaBq9kOvxEqOeWTW93S1Hh42dOPYhPrz+a4f0p8UlXYgZ+weXyitRjhOL5qm9g==","shasum":"c258f9b9c781fa124d4f2af67792d4136b7d0d64","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":54144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXOCRA9TVsSAnZWagAABW8P/0dl3NOx+RFcwpj8ZzDC\nKdVhuoYa+aE1n8H4UuSJaAxuZ5GjvBCgQA5V1u5I8M8z7yFhwQLZ2dBbjQNO\nE/RMz4djGn/GeCZwuF9ctLfN01z8ImKFdbMCQm65Xl9jhgL3xSohg2rKzg1P\n9czl1uB6uUdTzu0zIwL5XWNSp5mpLqgLBINgBFItPwKCIK5vZLMP7xSN7LKG\nL0pwQ5MA+XTCvYBBV64qgZNp0VArtT0Ns9YcR0LzicS9BJAZNsflP7mgpYyq\nD1wNoofwn4mSGgofFOyzyRr2o3cfFOwdLeWASH3YYkTsyAtdULZm2OmR70dS\nnLDNs+XI61wjcD30CyTrxbk+L5xnn2B8ffETLFEYmwBwL8SsRKMWnTZZUi8C\nJkwyVV9XVGewgj1rCN2Upa8Ht+RbqVcrCj05dB6XO+j3fCt5FaJKhh/1nRNk\nTmYqm/PeV5YHxOQEwjkUlmH25gfmYrmLITOyCTXIlwnJjYFHflZI2Q8tiGpH\n1z+0caQPFV9Xa902UseY1TeKCREyD4kFPQbhA8wtcbOVGbi3dgfJDQxAmsgE\nwrnDbCRu1u/EyFVLteOzDQjtR/m7GlHvF02YMWrCUeQz1s/fJunKJSOwGhHo\nK1YALDTSE5PyBQTIzk68OffJl4BJt/Or/yRuJgTizf2kkrQvGElURqcvNffT\nlDVR\r\n=yrpI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkMjBV0DSvhGkXv8oVhMjxPtNSJxh2hl3ygekyD32+xwIgAnR6JCYqwZAq5Cy8s01XjGov2Utrcv8T0gpXamZGDu8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.55338c25.0_1583908302525_0.970174073129715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-ripple":"0.14.0-canary.b7e388f3.0","@material/switch":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hvYuGfeEdQNWY4NT20zep+gjAHdBSrYa/SnP+5JLGLYJDhK/prNCa6G49oY0zW2r9I3O1ZT/2MsOTb9cpuC4OA==","shasum":"0252e4f038458b546413b175f833e05ab9935603","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":54144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUftCRA9TVsSAnZWagAAc4YQAKCM17E0UYmcnnniX7ZF\nvf98Fv5onMedA2Qv2SxnUZi133gI+h1b2X6D48gmJgR51ZumszPKFhsRJFYC\nBOZZC/kLgkbv4XVS/xWW/tMExTP8XUbWy4sh/gVxumqHFEHqZErSkk6Dcwuy\n1svTu4jqm5VobE0/KbwyQIzm+Dm9c/AjBL1/LUmI1UvMM6I/eSGNHPmo3uAk\nMm6xTmur+l43HGb1Mreqeu2h/6kxWPwHF5OfHaSEoozab7M7C301NXCaj6oy\nBrGC75sJXEX6W7piW85A0uFDnEFi7NF/7bKt5Ks4WQx+6euS3rTrcyREorUh\no544E01PstyHFrAmYOumpJ6Ezh+Dy/Mg/8wU7uAhYL3ZjYdzlxiNpqiy/rpX\nsGy4uMWmr1i2/734agk0gXpUJpaOvIxvCc93ybpPm8rltpcEiDoDxE/AQio/\njv9s6vI/4e6fL4ZcTwurqZ/I7nzvoZHuPOCPZdwkueOYWg9SkAOkSARIYepT\nRCHymmAs5/pWvH/JSJ+/myWPlb2UZeVCfA4BZq+p2lhcweZmBhsB0w4fBMIi\nKF4NC0xMFIpG+y2xTErfZznH7DJ4kNE9Xo9N7HgDmoyO5bM/Pfk0YzSudadR\ndTIQ6k9eH3GtvFtlJBYHfjvQCPzR4dvHE52QryRNTekk4fg8JW1qbVAsBcdL\nyUE0\r\n=XO4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqx9/Lpmz+K9v71FnbTZsEuZCWU2o+kPU3DtkizychzwIhAKZw9MWVH/6lroKcl9oDJeKIurJbl8w+h4nDCXURjLc/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.b7e388f3.0_1583957997456_0.4927664250918118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-ripple":"0.14.0-canary.b3211481.0","@material/switch":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-okeuk9if4Dgp7ziEyzvJLzAb22GFJJYNaV+8yNHMTEbmrufPCOYJ6ss8RWT2S49ePJq3JDTppYAEuiO0ma7ZPQ==","shasum":"f16281afa89e5dcfffc2723bb10fc938719c0dec","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":54144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjqCRA9TVsSAnZWagAApLcP/iOn363R0g1BflBJSV4q\nwNQmSwGho5tWambcJTH3t+TmmP2vqQCcYHa725wvMrmOhwq7TTJpbo+5uWyM\nkfEBHcYP1BnlLzB3DHhHMjiSlxrBvnx2bqubR+SQQf6xEVxJNWlIpfiTwQEl\nFTLszfhVHTL/AaJ7bJVY709U7CEj5cfer2VmE0k6s0ydwHBfAFO424tVxyRK\njfXLRZKT4C72HHjEhAXEdtKT+QCXHEEkiHrDRy/1gl7/XbHf1RoSyb/2DBQ5\nQqEd/1W1HE999XaNsgFp0/4nYtIicosibIUjFxTXBczvK1LvnpMKqzBGFVwT\nzbeVUtjayXAF+loFu0N91NAV8RMpAmlR8uFWBhQj6KZrCU9IMHV4pqV/tfqW\n/iwjaLXZBrU1qHIts4wFhfFezR31y3Mwdxj2ttGqR+4gja/hheVw4AehUuUc\nEu1RHSvp1RPYiJag7yaVtdjxleYs0CmA8wbRvBxLOzBlpPVIuMN/9arErM4e\nIz1Pe9xjPwbzYfZHPzjhjPDHMVKcbCBv+QL2K8nkiM+C0+rNfyF9zDC3xn62\nI3sDQSGDxbi+vBITuVKec2CeMYqXWXYHM5/3sxeDvzBoRFGd+ydznjswgvHF\nIZo19+7qK8zpmZF/aFaVWzqaZA+TkX1EnwJ9F7Thy+O790ZN6xYfD4130RKe\nlSjq\r\n=tAfq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJ5PrBCZA8XVcyVIjvxNdyPtYYkvFwEYWBF+Oeg06xkAiAwWyfWsV8qGRFRkIN89fDE7fXCvUU++ITIVPCnrYP9Rw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.b3211481.0_1583958250062_0.4582300594427058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-ripple":"0.14.0-canary.0b5c7f23.0","@material/switch":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NOTgAG/Jy/NkDKLgLU39jgbaN1vQI0uFOlOjto7D+M469vObmHNzT9ssjIFoj6JWu1gRFsnRHlHS7ei7d2dIrQ==","shasum":"b90d3fcd9db11406478bf3284fdb55ff67511a84","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":54144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV39CRA9TVsSAnZWagAAEusQAJB6kYSKejLoSVO5fcVH\naNZCd1M9mPgqjhsmIRgiDBTKIINXd2bYboeYLkyZz+pO1fiKRwBCytx6qNDk\n43+q8TCkmZO78hTRgQ8rIZmvNuR/F2wpiYjvAaqMoBKeVsHRcVIAuxuoXEcy\nbQTnNAyYO8kKegLUhEtjIq/VQq3tcrD3XkO3SxMDPPmWDiNiUzQie1eAF5Jd\nFZ4kpuSii5ne/rdoLD7YngZmFGSKbaWxo2FeC1DQgyZ9yEfZOn5QXVuOconH\nbw4+Ew+z9qTLQ7z45vO0unFEwXfcUUIq5JwzkfAunlsKSWckGZusxNREu1/C\nPvhl1IjfOZ4eZAjfwDqc9KKWoeju7oLXZH3tEnxZc2fVHED64e3RMrVcYbP9\nhTrvzdVZvZg5nOKa62V21y5G5K8tcJ37PhbtG3tazn1hGZ4k5lUg3T/nhUl5\njiEQlRLpfXpwYdEAs9qtrDy2rEFbrxWE2LOX3qcqnix/3nJ4XoEcEtiSxliQ\neTMCxQ7Aum/Vqd5MEfuytpRzFeiQaEtkPDt3O7jmPraAC9xJ8VWUMu4uQfD6\nQCiRgxYbVnsFrPV6WihB8vgxwpCZ0d+b381Xd8shflylS4nUqimsnIKKqr6x\nL8q3v9OV5kadDsWWQE6mr6vsj6JDxoVgXkxtRKU3uehAYuIKW93ktsbWknFS\nR8kn\r\n=8uir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICU4RBmuVa3H4g4Q6fT5eyXm4Ld3pk2T3eiBq/QDFzz1AiEAo4lB3mi2wDGhMxxbeA0wwz6IHw07hBjr6viivkwih3M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.0b5c7f23.0_1583963644691_0.2490304555769789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-ripple":"0.14.0-canary.6c0f0b27.0","@material/switch":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eNrOhf/ySQB/uGBcbF8tFGdQcEm/DKneMCBSe0rEs6bWZG2WmHzl2Yz6oIa9APhRl7fJnOPoAefV9RbMNDKstg==","shasum":"7e8b71976cfd5e58fe57c51349560b60300a1dd2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":54144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbiCRA9TVsSAnZWagAAjnAQAJUIB5aZEZlVYgdTq3uH\nZokyye3U751Rd1Dmuo5MxhYEZB2TDX9ZtFrxLTUsb4b8Mb+C6VXdL3hD09H/\ngspcsxDeE7UeTuELBxolvsMX8JNixaiGO0aKGhGbhdouycNZD0M7pxNpfZA6\nMxPCn4lvWTt91Am4T0K7Z7fgMSlfJbsducPhuh7LC4t0C8l0F1l+RJGDPxkW\nN+bIMV9JxOf5ZoJm6Wdndlmf7JckM1qIR63UPV1iYCmrIN+4nQE/q4YqvjuH\nUX7tvT0tlce/BsHNuBZkYwOCuKCO3fIK/1/uMrPwDFj7s6/0m6pL6HR4UCfR\nhF2kDOicASWA6r8km+6rqwzQH81I0jCjnPdSdiMdqOlsnaiF6FFPW7VTbx9J\ncCjOZL5tJJMLFkw+JAmNkUmrYlaH02NkuYE4kzB0WevtXSlW1jY/+Ozj3qz2\nBoHqPdrgcpg12DBWKe8FimdJUh38hZu8YfqopE36ag36FAvrb8/hDxWIprY7\nJ2q76cl46t6px4IYu74ojR815UwEr8M5u8rr0m10SAZ7QTP3LQGoFSHTMCwZ\n7dbP65Gy195RyfFhM+IbFbWiKgY/+sJBFIB8UFdjAIBpj1X/fStEvEb+yv0/\nZjJ5mRB6H8CFUSvDe7Yky17CEuqgOXun4xR9ySm5xvWrT9w326aqRNozzYzN\nLexy\r\n=9DiJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9t/2hT2JKYjzCCN1lrtP1rHGsz5Ch7OrpwD3SWhFu3AiEAhoS/REJ8MGMDmTNLFmvBJalQ8Hrs30i+7LsPJLv69AA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.6c0f0b27.0_1584047842481_0.3854241795989872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-ripple":"0.14.0-canary.b6c53425.0","@material/switch":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-uNFIE3Bcc3eah/Q2/f0q0+KjaUN3g7e+VF4kbL+v4FLCJqDVSTyb0e3wRkZHpAhT6hrYS4+6l/baNWs5Kift0A==","shasum":"89123de5f4a1c44c921e740241cf04839ba0de74","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":54144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sFCRA9TVsSAnZWagAAW3QP/2DKcuWxB1zVGoX1vvkg\n5iPPHrIf+svkGPnN2b0h6s+OMujwDz56MUOkx/6QU4Ur3+h4mjdp759Sz+T8\n51D3/atcepOOb/DEBr4zjBBltFVWFCc6EJd9YCcBCKWzukLJFZGSAaEcr8k0\nCXwDG7PnyTE0QMzqTKuPUWdCwsPwlFZDisJBz7pT2UFq6mwYrKvbLO6m0xrr\nFl1RzjaMzarukWYGS8B03pyEUGvFhgyEfxlQcB6JayvmWYRGKuPH3cFJa7ju\nA5A63O8HSTEfiHe5ZL2Y6De6YacYVQIPXeUt4Eb3USpgheOTCYLIX18/SJ/l\nklQtkDuOVtKs3IKpLIvr1xRcDz/JKIClZ8S+mysOWw8iYkYzbXL1QrLXv7I7\nfGGktflut1dmXPRqLf0sXn78DSJ2RYpfK/T4n8FmKPa51a2wcRqElKOdFE44\n3L4AnLJBL43aYayC2hmdux22NCPe1Xw7anIpypuG/Xvu9XZVfVTkXZZXTY+L\nipU6J40nJvh2xM9BGX/vbXHWXfn37bum0zLHOSCSbcQVIm6aWvoxv448LMLB\nlkVyR7QSyf7TU/+7CmyJmzInV2aBzDSK3XeRmtmeOneuoEMmKU82onARKNqO\nPgdAef9Yvz9zqXoNYxHGsWW6W5YO4jjXX6wvSAUgX1rsI4jWTb7cL+OP7HMt\nfKJt\r\n=JtVI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaxAJcZNqwpcZWdw5Rt5FditthJ49CxNb9eshHSETRYQIhAPumJUs0KsKJmKiXaW/s/wO10HP2qZOhl5QG+Z3ICwyb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.b6c53425.0_1584118533326_0.581801819222262"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-ripple":"0.14.0-canary.306cabed.0","@material/switch":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BrQiRSShPdQ8ZrdN6P95Q76+dahP8aFbMwwaCCtEWYbGKWRO2WHNwDKIApwBqBMwWDZNpUHYI8Ho8GM9/Kshwg==","shasum":"fd4679cc1c9558e8979abe6f8f55ce2eea32eaea","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6CCRA9TVsSAnZWagAAx9YP/3QS3nEEUeL9wH9aihlA\nvAzDkgZezv3P4qD2JVZ6wXlT70fv0kVMFRsds2cqcFsghAVhL0bE2a7rsS5X\nYm4CDN19omMISbGfXCMPF+CUcjsrjzqdtMGzEYwu2mX/dmXbuDLdgJZRLpKj\nsXF/ziSVi2oxNwZW0TuSRMfh9OxsQvbtWpV8d6dIaapKGqRZzr+v3qaL5kG7\noHP4sADhk0acU+4G2kCtBqdCz45Wu9jo6cJ8NkoR5pOWIWEq1GY5AFCqVvwE\n6n2HxXsVtn6prqeyLbQTs+rFhNYQjLVB9qqhYVhrh0oJ+SbCoYTBkck8M8kp\n3bkQkbGfTaOysQ1PoSfs3Ka2V2u/Oddd+3wH4nwwH1OD+BD6LNUZxd+Csihd\n4qZUsHOksusR+U6S4Y/+CpKAHTjzgQgxRAxEjU3bAJKoi5Subbn91idIlPku\ncwynu4WdBmcYKiNMrQKMTFQwFz2tkF6J1Kv7AqxNyKFIHFIzWrorN4vGu5oL\nPaRxJlzpm82cUP7/ATxpO7a+kPcRmhjse3p6Z2JB7AI3IMYEwF9f0HwAFUWC\nvxWW7nhJDNVEdfB8ZetkLxlEsRQHlvagJWer+aJ/YmHv3279O5TVtx1h+IRc\nMzug5NumnmZ5U6dw5bmeoV9naQL3TsOn2IuP9CIoqpnYoBCyYI77YK96I8ma\nMdWc\r\n=5hGD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1xWfJ5vlBw8171bncPM1JeWrqIf5clDmD0nsKFFTpXAIgKbs2+SNZkIdvEEeoTjuVMb/122R1HIMiAvkH7YcXDp0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.306cabed.0_1584479874542_0.6722399607769043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-ripple":"0.14.0-canary.4e250cbc.0","@material/switch":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Xx1EdoabYMKwyzOsUSOZ2X2EaayYfQb/WZo3ktLKA7UBmNyUV3ph55CuLQmjeQBJ2+LPK1BnpJvM0DODFmMWJQ==","shasum":"6db978f143bf9df41a6f1d283c8c09115ef7dc51","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/yCRA9TVsSAnZWagAAP8sP/3ZnE1MJw5ddYaHSaY7M\nqwqcO4bvadIb2mhg3eJaSxhyGHFKLDrTM6JI8+N2pWtRUTN+y7VKuj/DWAVI\nY9q9YfNl+QcRUXXlvqzzO51Ro6U5zMxjz61Jq8UH0y+Wxeo60QGxj0Z4qwGu\nsVoDrGlqfK7tjreJYB9v2gwx2uFWZlvDEmaeMLD8h6a9F2LqVqrbnQ8r1qaQ\nEB2kgxHq0gZhzmlTU/xNugGg36BkghQ82oOMggPRAgOaRKp6X7iwGigZB8eW\nYmLCX/MemFv/MqwlxD7/YknsIhKvXenHvE9Qo2I7HmfBqJyUHLM5M8IKhC9C\nG3RPnLOQKNr1hIpyppiR6KXOAaomjB6yJ8/7HBeRXLWH1hiBTx401k9KnYJ9\nnW6n+g7r5uCO6JawYwTlND3qsImZ8x3P81hriB72f2G/RjwAeZN8HMFbpBqh\nIqmVxZOwgAQogZR57tlt6WlsVAD18486sKSjHK8rIWYkUV14a2B4i4IeA70W\nGG8/yhiCIxbb599bwQIiWkVdj7kNRQ0MEn6YbEeqnOPdAUR6KfRnMkzrIR5F\nnCvh9N4LXCGmuTzNI3C7LURrSFj9xBXgawBO7cULztB0imWHvjhxM0S4tRwJ\nTmf8IGgsKLVHjTR1TzQ4BARGgpk4RqB4jBX0W1THesX6DG7RVpgV2wQHa28l\njQtp\r\n=/+Og\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrMP+2Zy/LAsoKJsmVRpJ1W975BUi2DJNzz3B4eKAHBAIgDsOK7nOmO6Xui56oE0DSXXgLKQBjcMHmyvtJMCIaPaw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.4e250cbc.0_1584480242497_0.34945900602675817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-ripple":"0.14.0-canary.ff82d9ec.0","@material/switch":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TiMPJ6iix6lRQwdg05lptK4qUp93gj83GhMcHzR33NbVC/ReibiHYrrCHd3DYehbZmNRk4K7TWxQrtuMi5xPeQ==","shasum":"3ce282966bd22f283a50372fa2cb3b5da2e45116","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZJCRA9TVsSAnZWagAAolwP/i6z9M1lkfMGosmycZvq\nWMLvkAoqZ/K0HzaYQQKGvPpVUK9/M0OMbVKlcUuYx0DcLPtvGWanKIJaJ2Ox\naBHGP1GkxWRkgQbCOaxLE6IyC04HUX75kQQdURm6UXJQVcBZr5xi4tllM4+1\n1U7pxtkIquSlUS1vLTD3xoREonH5mCXaNT9q572yVk3FIOt5Jqi2WJI0xCyC\nJUM3Jh3gvuQXMvASvH+IJOaw8N2s9Hk097PjjrhXl/FAiCN9wvhNCp+26J6r\n1h+ZImfJDQdy0YH1gxwkUjai5gQCtECdmgZIl/xiZyMYDu/9zz5KmVNzqlN/\nv+LnNb3smqJzjM2+y5trym22ZkA9hgkzSriC6XthCVNi481LBpGLGu1C+Z+d\nkG7gGOj/uMJp8qQsozZ9l8r1MutefTsYoPKqCjFGRmrWZ5Esam/JVKHQDDZw\nGVGbPKs/xX5CLPszYVdWDpcuwt4zRrFtF5DClhLmJorJ9NT8jxVOlSi+Z2YB\n5z2EFpTaq0A72uXkWC3v3dGiPaCPJXzxnl6bWxmv9QqZyJquaT4Q4T6/JjvE\nKhjf6cvmjBawZfTt03aE4wBNhUSNri2gdGZFBINa0ptkBXmBurQverNsBrdC\nUlcHCS80BMaWV2G6DHj0XO6wpiUFGsajyxGZ+O2cdBqcRZfidqkpZUNRg5M6\nitSW\r\n=/OPo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIMLiEGVCK4IXnPft908SZKmmaH0BYdWfS+Gue4LfX/gIgcoM2pXkhM2KqwMfHzoWCzOsLOcpjUuHTWqm8VJNKeRU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.ff82d9ec.0_1584555592641_0.13313563360426728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-ripple":"0.14.0-canary.f50f48ef.0","@material/switch":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dbI5LKL3ncS4NAITpXNGPG/ZESkNF51kZxeivjNeHxWGPPZ1s4UpOrrUXjEGVOJfCuoqhy/dbDPq79NBTwCLyA==","shasum":"24f8fb60884eb396e9b31531024b1e9c7329084c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AkCRA9TVsSAnZWagAAic0P/RCvqBANTHQjO+afo0ZZ\n6EDtGGyH8mFx36orQpzOFP/v+YrjxSgWyJZhUOyXziaFsBwH52iW03GVLwXo\nZpr9RqoMCbAUOZXa1NlbXX9dkPq/+j4vJmt2dNjy9c/pfSEZKHcYAJizudoD\ngiLZfHlfJOIPQ5iIvHLG95D4iSKigHza/URO0AK3dvlf0QLaojeCI8hb4KGr\nMIca+V/uNZdUh3euMbYFrsymcjcDtQBjiRu/AoCwipejeI+lqI9RkCIE97yt\n62LE/PqpBoEdE9sXbvAm2ewPyhtm4yEeJ3SFSbi/pwNGOyEtZYrQfd7wMDId\n6Q/0xO9Y018wtW+QEDNUljh/+crHVHwWBEQp66INcQyK2TM8+6joudpoqu1h\n/NTHwjb2i1k6Emik/+I83EoYxJtgrQZUEdxKWdsgUDo3jev9h1L+rjnw3q+v\ncuImSqpuJlmopswCXo/U5sG0veCmlGKheuVaXs/rToAxi2X522pfRFnZfgde\n8m4+/HN+c8idiKhJXCBCX268SVl8jJFG+Q5dGX9fd1KU4VPIu/MRIzz0r1Sb\nPk776TlDZbhGcI/7OdeHrY1AGXNvSSd+J8lhMk0z551JGeawL3hm32va2dc2\njvnlfuwgjv+nBetbpBkhbv4EPfUaRH2vXVagJ2r/FGpG64+MRGXL/avyBdcT\nOaBa\r\n=KsZ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh7737MzaQXSGLKdex/EMMhJBMRQsL5cYKXEKfSeqsogIhAKgGP80h/OkmBYoAGpnmsfzvmkAd5bB5T/lvIv6iGhrg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.f50f48ef.0_1584644131835_0.7554249645873152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-switch","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-ripple":"0.14.0-canary.134cf877.0","@material/switch":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-24cdxb98x286hjKnY0qopmKs1dbEgBZ3wXDNO+DBp3c5dbWxqpOD2otwNS8bniEneixLuIvHktP0+QdkenMgvQ==","shasum":"564b3a29f1faae87d5c18443fdb62a5b7bd568fc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9h+CRA9TVsSAnZWagAAx30QAJGvLUpiIetI7Y6QQ7G4\nyL47RoqvSn77yDU7MgA+STj3yfvVHA8HI8HxXwWtzh8MBtsql1U7nk4dzkwE\nrHo2l99FWUPPgxL4m0a4kNVuVqcvWqGJ4w9ZDTN49PgavesCff0AGRc9gPb0\nxrUwKs+4ok3NB+qe2lXJHgSwv8FRaCaG8P8E/DnZKg0A+6g6S/7gDliAiz9V\nAFEQMCVxal7Co8pPV7DuzTyxsKnuTvV8kcT6KfXVC9dtWuhA8ylshRZ6IJTq\ny7n4RjRChT4xK5uVlFJLlWqk0VUOwPqlzr1NsTPcF0aswrIMjCUP/8lfmsQM\n11ngzReDr+Yd1aFyIU5ho6bHXryy9bbOISgWna/3YehuAAy9bNeVzmX6LtcA\nmNp0E8UszoECom6m7ISU4NcZHGb3qK11P1lcMeCNJbZ1BsCTkgw897ubGb4T\nYa17Dp96SBv/h5RxmqF/WJ3Ud1hvROkEtx+o+av4aZVrHVbPGpUiDB2x5mSi\nTtJclpBclmJDiGB9i0FUcJZEvumIlpiga083Fp6G/vCdhnoDWml1RvSKrQam\nwGQxhL4UntIRHkBGhrmJwLtjwoMT1xaakEtKWd4VqB10K325PwciUMFTKX0F\nbIFhvpLU0xHZl428eHPfL3t3aTukck9I+esNKCFmzJqpMXg+Z4zCjzMEsRO6\nqqWQ\r\n=PGDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBc/qHvDIGaiEoPPIpTWSYXH3VZbSnW4wGo6u3Ecs7nwIhALPrfzZoa5EDfUkdCILeMCdCvDnX4n0OVje1rrh3wI78"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0-canary.134cf877.0_1584650366447_0.2730646980811362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-switch","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.0","@material/mwc-ripple":"^0.14.0","@material/switch":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-uXVMrz34JGyUTmHxP+14H8ErUc9mFKWZwkAPjKHMXjEJxXM5gqnymf5qImI9EjojenTxV6Bp7LgkU8xwDbsYyQ==","shasum":"f9bfd537b92b08f5d3221d376adfca228fbcf269","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.0.tgz","fileCount":16,"unpackedSize":54269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QLCRA9TVsSAnZWagAA6N4P/jcN2yce+F+REY5Wk8DL\nJjU8azSr6AEObP38GHUIPPVPOU/T9YXdxEBf08OEPlWLYWaMA5cBoLN7fFoN\nVvjUvmihwCEyuKz7LA+fzHirJOCXrYUwiHK3j0A7yU5LTYOvhJD1xvicUCLG\nKSQkDYS42x6grl1KVT/go4YmmdHhlxZgA7/si5FQxAWt7rdBrDDvecDEJtC9\nQ9mxczVljbQHGcDE4OxmjoDuIUdoqrBxgpRxOgw79vCbzLlrA1Sh98ZqgmAN\nircPJz9RTWKeFxcp0wBAvUOcjyEDBpJsNhxUwRV+irjcfAY1ws6G1hw9cxZ6\nSm5w3PqhTyPinui6fEXYRMR3bUeaLOGZzKnBY0JiJIVkeWy3iLWPjT7VgVt5\n+l3PRGht8KufGPayaTNh8UDXC6KmrxtmJkszXtGnTIH2v7zOEH6hCdoyKQmY\n4PimaVo/ePNBg7OHIH1JOEAZh4GzCqvJ4JrVmzNWiAl7yb6ycOtiLirgNGyK\n8bJa1KE3mQJFKDR69Tul5gNiwz5GU7MkdKmP6XKFcQx5IbqLvjLePJ8OKXdK\nFkma4tzMvpR0wW+I6hOrPhZSR/eNn26/iNZdUhqeUanLqKsa5bwzOXYvxPb6\nK2CdMz64w7+MVQgEdk/FvxMkmtKF7ZSRAxem426Zlzn/PSLmNHx8lY1cxCYo\nDWVK\r\n=rB86\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqSUIM2Z7FsSSUZRVfyJ7S39dHDDDOgnKqTpHYWCdQiQIhAIwnuchJrsNtusH+Hnfw/98CZfk49E1n0kgpwNsWTOa3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.0_1584653323253_0.27041196342534035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-ripple":"0.15.0-canary.2c1a4913.0","@material/switch":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1jSGPXQA3Mlnmk1NnMUPEe5odSNh3ZBM4a87rEt2FicHnw3VgZ+iQiVvsqKied0PZNdRpyn/PDyi7rZxfRhUwA==","shasum":"92548cba2341d7e70a272188714920d5d7d64acf","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mwCRA9TVsSAnZWagAAh1AP/jyIczXnig7flM7MqNvy\ndazH/DjzAemwKTKL+a6MB+26WHSYK7x6EG2RA2GRkkaxdpXVEQCnElUpmBC4\neyHbVEwFHcTp+uqqLLeJ/rj3z6qdxYSkxeOQnfCg7Vyb8eF72lpTqbM9I9EU\nhgpXtlPyi2YDvCP3A7jwgl+30+Is0uBUKT7NjeGdOztrmESDpdI5jyDAQDFr\nV7mjMKurg5EOO86kDoi2rBf/amNCsOl92C//t/ZqRV2Abe7YZL//FM6Je70H\nSMHD3rJCjQQ3oNyxkMcLVlV9qgLtZXuh2dICZb9aF12NdhpRp1ra6TuXXqHx\n97AakMUSZFCvS+lHSO5Ztza1/qAZakpsIAPfN1bYEPD9xn9TlB3SgKeKfk9D\nWGzs63lUUwxBKkJVaZEqaFX/SKioReOa6/nEhBw70gPeQ31/Lu1E8qkiNLQn\nMa+MpUOkCZNWmPYjSATDpI4WYtdDp03ZMxXzcBlLY97QjmMI6VOxG+tTXa2T\nK/8VWXFR1NYEFxIcbLZlWlAaUUx0rDaRsjc/hDXmqlF9xWAGZw5IxTT4l9Y0\nw+16maQSd/x673MNptfZRUT9cNW24U9XtfSE80khPRZmzE921ihrGscPpJbw\nfTLS12WfKkbP+YSWgJLpVA2WC6EUjLJTIeCbq31eGQG/x20g1nM4wY2I5cq5\njvDm\r\n=GjXv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1QdvTu9EBWhzvqNTJ3q0qUAJgXZXdlivB48l9mR8k9AiEA2irthNoswJ4ASO91RX9kFgd8J11dyAY1GywRelA8/34="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.2c1a4913.0_1584658863739_0.7568034573863396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-ripple":"0.15.0-canary.3a6e481a.0","@material/switch":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mN87/5MOwR0jqkuwiuXMPg1Clvxuq6CKDSIeBDsPfka+uyVv77NLNkAJ+F/ovoIfp1YvUJBtAiYpt7fTFsc1Fw==","shasum":"38372359daca679c0ed9c321dbf73166f410cfbe","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfBCRA9TVsSAnZWagAADJMQAKA4Hes3t1oiPt7BpXLe\nUnlA4Wjc6VxwCacdvqH5jKmoHi5rSEHAqSmnFPTnaF4T4LeWdlg+ZkrtOFtX\nAm8hjE0Qr23VT/2V1e/hc9a9li3IW9WgdQRu+wwya/i5T3mNKHeLKM3rWwWo\nWGOlP7bCpBxnYZV9P1q2ZrO5mSmuMhJexlf9mK3S4WLpHZ6STfMsGt1RwiWN\nDpdv4aDAUSCQI8IM/DuYebr4pF+QOUxqqfY3Ap93I/0YBY9SId3QXxwnqNGi\nXfatqbTGzKiU6ZWB0xZ+MSKeeutLi6a40pzkhNPKTKeGYawZpJlO/2Sc4y6f\nwI3uTHPUuZ+0Z3e/tee7zm9SpUEqo2mBZ/88+6OrV4uWRM1JQ598aEw+w5vp\nxv13+308uBkzCu9spsAV3zYBY7KJweWKB7W8D2vhWzkEhjGKHUW4uip0jvyQ\nD0lgCqcbiE2c32NCxeUtTF08TpFxOBMvNecKDVTBLIk8LytqkPSpv/LmE5sn\nOTZiFsF21gCFTLQZGwAcnSfqDl0K7bNEG2rqOIF9PReiHcnDN8fLDd4owQvm\nkJGJtevd7wWgR228ass8eSvSkzC4iz/JlozO3IBDZ91NYMWpPohg0BwMV8j6\nEXuHZFbt0o1ByKdv01lZ35lUhit7aEX8MhsfxOj+5N5R3fY58tjsz7mHC/6Y\nPRcP\r\n=aXlt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxBFT/9WCQz4JGGZkJwMG4quFdmgXe/N8hUTC9Q/5i0wIhAPHqMBXTZGaBpef9DIb2O7TkqUFKgXa+z52D//i3hV90"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.3a6e481a.0_1584728000684_0.4534177971503801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-ripple":"0.15.0-canary.603d6eb3.0","@material/switch":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-T0nNLqtK90itH6lBKO+lrCeLyLnq3/rBMNaWwORtTlZT+bNQ6mGlasNqmKQ5MMm2PzhLNo5Yv8o0GVijyqDT/A==","shasum":"a1fb0b3bdd01a40eefdcb9f1a69a8c4a405a9f57","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdFCRA9TVsSAnZWagAAVDAP/0JexkNmpfqn3M/bjV60\nsiAecAD2ouhKab4CAPr3EDQGP1ognZ7tbVjlpX9+aFqaGUiGYBVL20hJpliz\nEiMh8a8z94bAEJhYohJOpG8LDkKB/wWBhiiKld5sMg0A8iuCB2tWyQyEfQfQ\nZPzkUWc2A+o9ga/zESTImXlJa1+Hvw8h5VAquWKBYi/uuTwMg4wPgVxcSySY\nuSR8aJDZ/JywMbEtl7Eyp6Cy8lL8Ad44oV13JxWg3UnES6CRSGZFSVPQ6Z91\nirfrdXjOluajQoqBA4t6sFExgmqRFy0mYtkyw6P6fclKRB2zJ6849VNUCcpo\n95RCAbL7CmNCZaqsMN3Me8N0swVlbA79W/huqCfyDreHTt3GTrXFDMWvKk24\nHgWEbiV+k+OV8DcfGxww9vMTEmJbW7eI/3PukE7VwFkvK+DPANcfH68f5Iks\n9dEuzNQ3HY/oge64Q7lrAklQcYGy/GbwBDDyU8zkzosNxob/zejTbWAZ0Khc\n7/bVWVzG+S5FpSCu6P1DfYciUCfYDsPHt+SKOGIC0rccxZeAh/PDyxB5BvhZ\nT1d2Ix7E3gP5W6iKuN6gvn4xdoVuYL52TKOYckxifxMDevZlTa09/gdCSW61\n/8cu+G1VKgFhh76SaztQxc2yryRVIMp51yq9NU68PcXHlcHqwNs2Aw39B1VK\nP7x7\r\n=SHuf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBK14xUxV9KqYDYCgMLP1k0MwOFnzIY1CmwJj5EIkp2vAiAd/Cv+exOeHl8QcYnL1TZGjjSMDtMjHEt4X2Ntafg+Lg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.603d6eb3.0_1584740165580_0.06819280637647185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-ripple":"0.15.0-canary.05c6a93c.0","@material/switch":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-uroz5JRxKYQh26aIVfWvgIh/3B4oS+c2gR25Zuj9RtyOZab5+pHHajlg3P91i14xWfkbyfYV1qFnMuf8kVNPwA==","shasum":"af247b31b960ee01a9f96ecb6bf56da5db850799","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":54321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWXCRA9TVsSAnZWagAA7iwP/jPFdAZTQtIgFLSRxFo9\n93C1nO1XK04U/YVEkoKgEj7YEBdn86BToJGlcpho92il2XJD3R2yQ+USLo97\nczrseE4OXLAREUPzgKUX5FQekLHBQSbs1N1aU9hG2yk2n0k/3DeW3S1z3Zcq\nb7oKcUuyBOW4rInmhtdK8dpXKziHGvoWHtAgia3smW2tTqcP+rjyjGzjnaGC\nWale7PR1Pcg+v2j2jtqC4yGUO8b47mhkQUZ4T8h+nJGXOPFhAe52kBlDulME\naoZzM/KyxxfM7+1+dDSqZEcTmNCIhaZe5oe0uGTdlHpPMCeHeKIQ7qiXobDs\nwUU5yd5xjXGYHqioALswLHaU9LY3qCSonD3dA+TuB+WoUi0X7qVMIHIwKudd\n7ahBgKe2Cs3SjL5zs3bdb/POeUykCAW+jKrDqMFevc+eaNJN6QHu1rpY5ajg\nuixmcNVQi4Z0yVKSvDaY5DW8TgM4POD3td9qSD4CRFSgfavyPR/Xq0oIh5Qv\nzGFzATHfjlJNRghwaMJSvloIX9+97+f4Bi8+mycDI5GMYvCrc43ShJ20nSw9\n8DpE8A+N3lwStzuKPZiy/fotUAuZgnJMuw4mt37U1cf/J0ERVpUmDW6Gi7af\n1LsrHpysU3tBEmUBbzQOEcdEL8CGFP6GRCmny3GxSRkPY7k34Rt79p7FIWwt\n98pY\r\n=ATCP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEc8wSovhtflO74/NtEXcCFUzx4Q1hkzcdvFbmhQgS05AiAYYyl6Q2ohnNwptfFcaELhl5ldMdCNdaX72YwRhBMHiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.05c6a93c.0_1584981399419_0.7120854239471646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-switch","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.1","@material/mwc-ripple":"^0.14.1","@material/switch":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-v6KOEyj5rxNudE33TA4BDObaYLIQ2hnawxHu/c6fYdbv2/jxSn0Aft7SpYYWJYq9cHbTbn+tlL9tFEkJvf8xWg==","shasum":"15c58cdc4561deeadaf4e356c627abfe2c1ea8b1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.1.tgz","fileCount":16,"unpackedSize":54269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiPCRA9TVsSAnZWagAA92oQAILHjGsA/IEnsoYYSSIk\nV2Yk6gZFxm++Xp266/2wHNUSx3cK9+2yrQ/fxNzJH+NkQP3b7YpYgVgODbXT\nA3/PpR8OuIqe8RHHK+YKCpdU0jDd89Kg6e2zzst5YxN69j2sipJNhH1K9nyj\nQ7uGnMw1AK1tbga45sutM7CJuluz0oUnU2To4XXedUsa7hEhxLaaurVnQWj0\nVKAwWHLH2oi/qV3g8XKn6m+kLQ2ZliA/RJZpKSx2qVN/EdwT9GEFx5BcRjnD\nfAVJe4+UmI7qLgDj4v+7Mo+f77Dy/wtxg5kzyDNITgc1bGB8HWG59SctKUL6\nvEDcAGIbfolHQvLhUyA9snjNMy3HX/15Am3SEyLUZO72QClHwah4ym/1eZT8\ndJK5eviUNzwWMgCAulKbPCeGdtYxrfyJi5f+9d7oXsEFRARR0/10Qa5hIz31\ncr8Qiz0Qa8xy/mCiQynMeif3A+QWTRCt/jPKjlNOYWbKOBxJreLqTTrt8B3+\nVzLDygXWsB47KwinKFQNkA9AnikjySQpWLp5/IkWvHw9QzQTe+G/x+yd+v8M\nTu0y5mDC2VMwm5YbLjfkH4dNJg69p9JLVhCwRQsFzHTMeSLBGB9QY7IV7cg5\nbRFXrQtLrSt+W+HADg47gzUAJihWRxJsLOZ1wmZSbBbuZhSiYOBGqqgnVDuA\nP5UV\r\n=k0/s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPERghaHgBGfuv07urp+RuTOPKcL+S+7DPk+J8aU32WAIgBjG5z1EIh6YvpLqsBbk78VM646Xur3Hd02k0yYGLHCM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.14.1_1584986255285_0.07308619486030232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-ripple":"0.15.0-canary.4e6be3f4.0","@material/switch":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-juMe3ZAhOaB4w1fZK76KRwn74Qdw0zOm5UKfk2yYFadAsWQ/92EkJgG/gFHTdUFHewyRYnqb2g2pi4G6u8j9NA==","shasum":"bb7f9b583dcb19f242015af0c1c3c91f2d02b393","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":54314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSXCRA9TVsSAnZWagAAOHwP/j2avGENiJWi8tQzgNUs\nQPmLF7/jxUxhGO49PrOpNqzPfP7QFrwamL7NeVmHbkPQTX+16zpvJOlN4ayC\nxI9Uc9x0XY22bWy8RKRICDN7lC2f8914ayz9klqrgB1D1qfkYJTv+l373P8N\nJyEu178dzU2wMKKvIqKIcW2L5vNBLo4PYmqP5k48q0qvg/0n6gnHDAZ/VHBp\n70ZlBNQu/Z7HhEHvcuT4328wLBc4qV1LkY0wxU9gFbkphsuGt9TWW1adHMa5\ntLZQJWqNicJtTnt7/Hv+D5/0PkrtT68mghDvZvVddK99KyqNnfhWH7LsEyYt\nX2JNFiqTJmOnpAjoNiVy1c22dnVJx6PUa1ExBqXpgiahbfazk7mvKwHkLCFL\nAL0KBP2OklyLnX8zWgJodiOXaueiMyOehV24m1wxtQ+/2uVjS5XRIyXgV2Vf\n0WcQLzo1ctWWYxYXm1DFmw3dpyLKojAsLmEK+RHwGdfPiqEClV/6zTXAddtl\nYDzhvYvj+ks7KjMc+ye7Du5Jr6lpbAuMOE1YdS6DPXGd10+M/TztMbnut+km\nl2fQf/DgpHbIWJfR5l3mu5/lwd8dpVD9AcuafnEwO+Cw7190y1FkfuLFAIN5\nNvRJGjzZMW2h5qdNarPbKZfyi2NdFRYTDYAlFJsn+WM8NqsY6TDZEOpCQkdj\nZBfY\r\n=Se2+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoVPBioquCrxrKmeXRh5U1yDrMhcc0/sV2YxVW5MI9fQIhAPWjEIFoZdT8Ka0A7jZGSTON4CnFw3sfPLJeZzXFtrp0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.4e6be3f4.0_1585083543478_0.2132545812173403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-ripple":"0.15.0-canary.c29a683d.0","@material/switch":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0C4zweeX+ohRnmYfJO4dwVl5lxXHQIXAzVIEpntnY7zBBRwZQIA5xZlBW/BoKUVcktVKDiyUDIXV42C1tN1skw==","shasum":"df82979a86e06f0f6db464199b5500dd2688081d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":54314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjBCRA9TVsSAnZWagAAJrkP/3VRk6NyMzxSiM5eYQCN\n9m6ASWQ6I9Ng6SQ+CRcDNigZ3G2xN3O8YgoUinCom43GZZK7V3aaa1nMTJno\n/gj8LTm1NmREV5X8C87jvl2VnoDiwWMDwR9JtedE7ScG9kQW8CzAhtp0AKL3\nprTZ9h1rDCIPobuxugUrEDl9W9I44aUzHc7icVThNAbnTgJb+sTmhRm6/kUa\ndO5k5/7Fe31TAwUIBaYpSLBQHMhpUqjvBIYJseIKyyQkdObfghbgDpySL8v/\nVVg3MM53Kdh7z02F4uHzz5eTg4f4r/5wAGmkefRao9Ke0R3WeDEqUBE3Ey4q\nOfD5T7oGTZfr7g1y4x+yuLXX144t0lhF/dbjT/meVMG6w8CnVw9TGIf4CI5G\nkYQ6rXgpk8QI13MWCWoB5zvQH//LAgNUq7ectXMYKjCgyRXvYjVQSp8AS+pA\nh/bzx+9JL4Xo9J1DEMCr5fbC55KHHEveMc8jKSkUA6ahqNjMEqW6j3Vpd24R\nXDK4XxOG+nbV6kR3LU0jNn9uSkronRB8e1982ppEelmnaZFVpk+fD/Gm4Xcd\nikxgfUpkj+IEJ87nb9gyGW9zccI3tlsDJBRfIFiDFUSWNVLsj63zQJIuzj9b\nq7FiopOYjrgjQRR4eMXDy1061tXaL+Ln7qZQUQyZEN+VL6hox8Y40cA8zCcC\nSCvX\r\n=2qtl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgf2m8LJD1Z2lRIQVEvT2IBr7VQxnihLBXmPEGWZQUKAiBkfK5fHWDH/qFy0ZmGY+A+rNyIWIpH2xKjHjNapboDBw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.c29a683d.0_1585084609010_0.07653838296194948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-ripple":"0.15.0-canary.fca3dd9d.0","@material/switch":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QAkHqnqXPXh6f1Rpr7802uGQzqeuf3zd8qdOdOU+yOkmrQGZ+wF8RMNlD7HeqRoHeJzCLYRNha1PNp6v1vG1jA==","shasum":"146fe85f39d997af408dc02019f5afde6d1e67e9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":54314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsUCRA9TVsSAnZWagAAzy0P/3BrZ1YVLzq24s/Edi7I\nEeRbcamIIFw7jKbOzOCdvqH80/azOZou5KK58YUul6xhkxbPB3XwElIyT/6r\nS3iLeltYsWnm3D9GB6R1ONlpb2P2kwqu9LyYmzI3p+7brJlE8yJkRezzwTui\nAkZVEVLEeA5pv/A5V719xQht7/49Gc1gBxt2FrTKnV0vpKxZIF6iPOoFOL6+\nomeb+Mfw2k7ppaIdk5GVRTHP1cMVnuQtxBkmWEBNquwPNwcZwOpE4F8SsCEL\nzmYltgFKJ/42lqsqGT7++IFH5ACU2Hf96mYytFSkaAEOm+ZcfteL4rWXS3xZ\npQoM+9GwF3xlx3OGUZY5Zh2DSsycSpVKhYhA9UoPIGFQF3knNArELUaDr6Ma\nqJN1Yi+IqKjQkO7gY18oynbb0pxti1kvLGz08dLPYyII1PRG6BCjfzzyfaA0\n/Mp4A8oCma5WZAIT5nMDCRbXzBPYBrzOl3WFNrBuL4rz5mACUgpepvdInkah\n3bjg6ax96nhwYRHRZNjU5vfvvlm+HwAHY9z65+oeLTu81ITJuTeRNC2OIhH5\n+cmmM+z/rPg6wnfKP0YB6kBK0LEkfooI/mtQpn1FKusvYO2ntHDcL2BNLs2T\nbt4Rs9zEwftZzBqWLMqVUPPX3XmOxE0n5Qr7n525PTPBfSLPUi8+/jYrJ+tj\n7cyL\r\n=PSSD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/yCNEcDS9ta6LeVzemYhREk8Pt0aJ4VZpDWZV2MiqfgIhALtslKrKd+gP3ME+mQLI0GMLnoLOxXiMF4WnBZlHvFsI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.fca3dd9d.0_1585093396235_0.38153372822298204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-ripple":"0.15.0-canary.1e73da49.0","@material/switch":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OwQ6kDf52iFcWLH9eiLAGE/7tUoeNI090aJ7oSfWsQ2MklA/MjwuczjRSMQhWi9/eMK5zTwPIMbRabNXK8VXsA==","shasum":"875c8f74a3e64bd5cecfaf44f9fb7e1da8701680","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":54314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81hCRA9TVsSAnZWagAAAf8P/RipVofjLuiuyQeCQQUT\nUEd9hvpZba8T0Im4gHDNlViS53gWHNHBa+onpAFULbXzS/Bk1xutq/SXGEOf\n6f/3USZnhQWGLUrTDH0DfLHttMicC/r+SaCeLr9u3coP2Dna9gAu8DWbyKua\n3W+/5MfQv1NkfjK9Fbt+sQxCnS5MmX2Ppbz9TV1yvU9oDJPKjXhsJy5RyVFY\ne8eMBbQh4089XdCUOHhBypClSOxM4LeWJghbGLagi9oP0P2WFxImNkw7pwIq\nRXz7+mHLQm4yTxoq74/UfOtVhDJelbhG44LvTcR1SoL5O5jarhJ5wMQR2XYE\ndOZY24py+9VfCWYEWXaBvHc0R/rk+hMDQWqrmEkLs0c3qGb5ptf0lfLAz/lY\nqmM3n8NZ+adVonqQxKd6fIvw/NY7VmOzgWbdcfhomvyeq9GPL04wt5iCazcn\nN6g9bgfpuFyg053y1dBJ25RzvFUNZS+/f7JLYJL7Eg+0BIal348/mDhVSsKJ\nTDBnQSUDBDOKzETKyq8DJ6gHqaM8KZX58YdEy9I6Mz3LUkORFpURF2AGXyTB\nLBphG6jA9P8JTxjkk0YB0zhnVEND3hldfyPh1lfwxjNCLBFFO1w3X34V25rh\niR/mG80NWZW/DVNeXEaZyuyWlYqDlb8EccLNOttVIdEjHxHLgrFmw5ahru0g\nW+7T\r\n=5ZJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoV2R53BMy9wmvugnVu6V3JWiohq0ynt964bczz66L/gIhALGMH51zV2/mCkgprqC113HoKKSgT6uzogGmVrBifOet"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.1e73da49.0_1585171809522_0.9394866156838111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-ripple":"0.15.0-canary.bb6dfc5a.0","@material/switch":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/switch/images/styled.png\" width=\"68px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and a lightened fill of the track.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1bL7WedKZy8vDFUEBRVZSq9woUOiznlTJx6Tkz+kDEUSrov4jYHwFv5gtAIXA2D179KEh0uu78bz5G/ZognQRw==","shasum":"58f1addd047d5a964d8dc61825e5420d49705293","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":54314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWDCRA9TVsSAnZWagAAKhYP/1tCCHromAlJTxkgz2s2\nSJUwpPL3ML5TRj6r5EZd5zz4cJCElfeYTt3LjqvvRvwa/mBK8wG/g0wlWnLn\niWFvMdnGwjS1T9Tdr1U+IvZkIVzoj05he2943pjICC1LG1mRmeeJbNaUqsWn\n/ZrXSj5nrRdwOYXbThVcqAeCrAzNTeK3nRCqp1lNOCCcg7eZqXbFPi2wDwWF\nef/Vskrktve7Re1sEwSV+OwMF5ueo0uAHum2WP3gWOjd9o9xeT5bzriGzS8Q\nNRZDvFHuP5USBtaIXFbnBtLj3qttQXm29FG58YrINk/HfQK6SakGBb6LqWEJ\nA85ouORXwWhNHeTQ1jgjKzcD4iR8qPu14cX6PoQ1lq6HAAfblXaBspHSvmut\nLPArBpdAM/Z3DkbI5HVuR/BKajLmiEfmiuP9JjpTtuiX4UTEpFE/mUVR0wGp\n6cMdSPUg7aym0luMu6CqaUeSpu+PByFpJuZHeQiX5fTDE6HRtMjmkdtj3xVZ\nyj7kS+WGauwAv3IIZQRYqJDQGEk1Li0Imu2PI8zkgG1+wkRycEh5nmhejyxc\nJ9WxpymMf62BLt2JRw8iifCK2AfXOifsp6nErbVXUcDhA1EwVspQ6d0+dAtq\nu+j3KkOiqquVuol2PL2XKrZM+oQW+dshutXqQcqK/yukz5LcIMizbL3HLHaC\nTJ20\r\n=1BUc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTGqNEv9KionkVhx/0Z/m337AzuZ3JfLbfoW4JeNLMhAiEA/neMpjZZgoXtPdeN6RJEkJBfWhunMQa0DVvOtJ0OD04="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.bb6dfc5a.0_1585272194993_0.2660603904554306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-ripple":"0.15.0-canary.1884603d.0","@material/switch":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Nltmbk6seh8fm5YlB1aXYnY/WGCru8zLlz2hSxS55u1BzvR+9iv8Ci3m6hkJX5o9D0MEJejxh+D5/01ca7/21w==","shasum":"f16026f53a2be378571c3f04cab84fd074c14bf7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":55035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflo7CRA9TVsSAnZWagAAaLIP/R3IbwXOOkPv+jldBqvT\nyxQCDc8iUJjJTCiL9OsivLtRyZwjEOIZUTRyNMkQ926E9MDZroOUqKK5Mq/2\nYM8+vFUIm0Z37mIritT+YzuFytd2MoYkBYlZAqCK8A/VHA37YDN91vrzuVjI\nlbhD3aaBmJgIz9lA/Aynn0+gC1LLwqb4g+3Nh74Fl0hRbPdSTe+92aMUfjDJ\nH+4PQyO3JO3uQGB+KvAKgUC5Gsffsda9ESqSstHlBulLGVShJPqa0f8Di4iF\nPrbnDG70jfLIooDng3DXsyLtK/9snsfQx+Vsd+Y9KHmFZtRt+3mFGSzAVe5Y\nxJcGc2PJIp3zQp53AID1O91C3fwA7UTHAaLltU9xFFnVPgbHmXpSKygUx+am\nHE3QQHLtUXVJQqZrtxnAoiToNucpyjpY/vC0vAXHs8/Y7TkrGLheQEsrO+Pz\nRMMxgkk4VIsy5KQUIQ5qRR9t2nzQ5vprlSfnwdoB1XY8RhyIUHsgr2k1eCT8\nCkC8JyBMYxOIxb44NWFkkoeBwFsK8hnWla/bHJHrf1JU+jdJTEGiEC1XoS0W\n8xr9mKtU8fulJasLCt9U3GhPErxr8/q4qLL17ct1Og3igjpXL/YPhmAg/2s2\nn1e/Av3rH1gtfJUHGBgU6FhZ0RcNygLA5x96fztyT9z6k4L74SB+vfkk7PM5\nYXCi\r\n=sEbS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy/OBQmPZZoSxXD7QcrcAbTUDzR0E3qbh6qfO+6WI2ZgIgWbT7n6evk+2UOUMTfTGDGaQAGWudb5WnegNl0LILPSI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.1884603d.0_1585338939622_0.4174486312367962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-ripple":"0.15.0-canary.aff73cab.0","@material/switch":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xTszi3WFthTgkCJKpo/L8kG+n7NQQcxAiUJK78A0vsX98slUEPV2D8It4lh/91Lj0nMf5fkLrceVtWC/FWFyEA==","shasum":"fd3eb21e3d5afe9197843fce5c050efc23f47e27","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmy1CRA9TVsSAnZWagAAnPwP/3JQSZ/G7aeLANoGRuhA\nH6sPwUHzwVWrk26G8q63qsLL/agukomW3OpV9KmUL6m2CI1Z/IvrUriIJrpP\nSgKQOHLGTqEBPtR78ftxta0IWoUp3W95DttcatxJVZFzcqVsxFv9YOIE/Lml\n2LmSGIBNtvbGUSVgu8YLHJRykgoCh3PcdjFmnWPXTlRdTfa3EbLgCEZfrbQX\nuoWaZM6sVfoQxBe8TN8IK20e9NhPUIJfI7UWHCTwROfHlYA2idTCI7nMZmhO\njIowmGQeCYWv0YvsQupLW0VkquF2GpZ0+Ek225eYYQLY5ANR/YeHA5yA3hRn\n1EQez0IP2F750iaFAHyNrsf/u4xe93fwtTpS0Q6KJJZOtfLpv+yad4SZebly\nmQPyZMSxaBljjMO8pQvGM8Kx0NJKyW7h6XAgHMx+BDISwL+a8NylBBgnyxsC\nBC/49M5xrEtQHtxY2CgwhQO/0fAXG/uA6zeYZ/pOe1tfbclks6bdUhB7bktv\n53vCuFG5Fr5NNSmVQn3P/UoUF3VHICxUwRAWTlI7yKVK9rDtt6TtV22sgFUQ\npuN+8lwUAgNFRZIE+bo/VN27XLXiLykOJRQv/UgoPu+oeTGn7olZZ/zRrD5k\nwUXQRowJwoOqXHqP7j99Da/qSLKuHyeNzV6P4swTwWWRGJrxsofRgjJZF6a3\npSvr\r\n=Piji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwdqy3MelqTAoRX3PFoi2QHG83CGVOAt6b5lYDqVhBxAiEAp50LqaWzREKCQoKnT5zGvNQUUrdIuWVVs6ffdR9s0Ag="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.aff73cab.0_1585343669125_0.5040369984811364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-ripple":"0.15.0-canary.63168f61.0","@material/switch":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZIwTKgvu7Vtp1KoO3LHbop5JiC1xeHd3FcTNaIsRf5lA07VSjnj4VTW+5sKR5ut92iEkJvLbV4Yiw2vU2knjaQ==","shasum":"736172c0ef6a1c1dd62a7ebe1f5e177ec117765c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gYCRA9TVsSAnZWagAAIAoP/ROaT7rVNEA+aiII+oH+\n0F3VOiBO0KiYMKosA+7UHXWxIZ8dPGKNgI0MlXGaWV47Fw2xYh2oLcevQReQ\neTNKMxc7HmogIBtR9sNgUl+8BfMRFZ3L/JzNJEl9M0UIJviFNqdtA5cnEbW5\nX27VbvGh2tDIz9Q7vZ6NSh7OqtaH2VXl3yDwK21R4aEh3zM1arHRzmU5Qe+9\nAZJwEzHmBC9XJmJr8vgDI350Te+V79uIHpvOlAgJd5iDoLHMJjowKtCHueWl\newb7jclPU8mGLFAv1gEd3BGYWf8pJGXjNI3lEN6vic+nnwKgUwwHkDpl2AOh\nzG+VgKGKn0Svrd3auAa0Ci+XTRkJQmXJeimTYYGhGl8jdvYw4Xm6KFh0OxTI\nzCLCODOcP9ebX6vntlqnm3NiD4s1ZOcAWecbTIenCsXRKRdb2oUxXqToD/pY\nuV+wG0IvSLM2iiLsUfNE4tJuYhiGD4SctQMPV0Hy3cm2t6JTOcuuOMq/a8PG\nN5ePiNFPeTc0U3F8043nhqddTpwYLCfCiUaPmoD+FE9WozkcNM/BT5P0M/lg\n4Vjxtkuv4lvbCK957m4vuEX5a2spu/e38WkMbfljGFprQfkGR8hA6EAUpBtX\nHY85Ek3yZ7cgDlH2xxc4oAXZNw/6rkcjnK/vwR8jAMi1495/LQafbrGiZLD5\nlU2D\r\n=oQM8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClPtiRSpB73ANNQcmrdWucErflGrB5bbgZt6LILeCmPwIgKWN7NlFi9eVmjlgaXHWz8kfJoNrakcXZbT8V/PbvFe4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.63168f61.0_1585678360542_0.475695772293268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-ripple":"0.15.0-canary.9fb79b3e.0","@material/switch":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PmGllAXN5YpAA122N8USEoIDhLlhC8UQ+7cXmlCzdJbvinVRFYtO3E6uQJQGOUPZ7+NJfPkxNzIUXWbr6vd9Hg==","shasum":"9b2a7e2bc5c41ff9eac4a7ea5939bcc9a4b9fd7e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QbCRA9TVsSAnZWagAA9SoP/17kU5AeUsyAaq6UZDKZ\nQx0GAvO0/aCfGMTvEjOYo+rcJ3VEQ52fAj3SSRBbgbqP1LewSkSvZi/C0FZh\njT6L1DYCraOmTHGFAfdbGKvPBy4AJqznLmq69BihinBbfadAdGJBAmiaWccD\nfYfk+JlimT2PB/2Gos/IIZFeDuxyGFUVddo7WDu+ijkcg2k5AdaaI5Of+V/8\no4zbZYxwY0TLAwQhKKsgZTZ1U97a/Mxc80PWf9uEzl8e33T4c3FRu/31muzm\ngN6sePMU29ceNZ17rTtUDsH611XhY3XX0PgT2CWzkD2rg031L8SswwwFOHmZ\nlFxNGTb3pwkxjdrsjZDEbHhln4yAUaCHl4Y/DGLqsuGD9IKlwKiqOFcfwrHD\n4aWs9HPqsyLOb+3nrZ9hINCJFSLMsgWfbkE/Yfq+KGZr3hS3UB6Ks9b8IEAd\n5oSiVhJSlxCh99c6w3BdTetlRllazfeJCsNztzDJV3KhDCNAw85uTUyh/+f4\nd6rWoOMW6O6m3h/7yX8f7LpTmV9737d75tLARgf6aTx/yaTMzoXnX0BVpi8T\nNWh3rArdXSXs01FWSCmq1g6mMfxjGkFT9NAIDD/eaZ0vDDb/RoPrzU3ojNzP\nri7o2sb6LURPT93ejFqszMlekDEYgrjyQpybw8i7JYe3XyEEJSWIY4S+/z8d\n8wkx\r\n=7sMc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDCFcImGPexkQMa3SGklmcyMXZ4jdy6DXBjOztNOYPFAAiAp3ZqbHVhiebuV0cYhKxbpFv8H/mgRoaBDR3HGqMvEig=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.9fb79b3e.0_1585689627206_0.5282686386188511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-ripple":"0.15.0-canary.9bd3e9e2.0","@material/switch":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AAFVEe65stTLk73bsgwwXcCA81zhXqI13GYKJUSXILeQLT89J5LV/qdtcPwHZbRxGHicL/8JpG5fnpeAVydwwA==","shasum":"e94e420f2987b862a903d7c77d5bf90bf6c00a17","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91ECRA9TVsSAnZWagAAAj0QAIyYzDPfwb3BcKxvy7PQ\nhN1PeKkQP0vHQSOjxKHh4oUgjcOKqBJFuub+0GtBY5C/TPvr9GAqz0baCyby\nhU69sQVAyOS01u6V5gqkF9UbFYrqaQE4SQEukrA5U1u8ytQe9l1DYHk+x89A\nAO5Yo0rQIkV6Lt2alNsxnbmTtcjISV2jxMWL0hkHSM680wLGAUUzRUMBI6pf\nojoEOdB1ciYgVmzPC+eRbyCBeE3e/USNMILD2R215JTIi2T5N+kibSvn2Umb\ndR2uXXIrohhwQAmfkSGVctf8uc0Ri4CBD+xGiZxmCQNUiCRiqvtXpXV8KPa+\nlx+xr/PYyHeFzXn2mcbG+AwZGHnrEsLBjy0enjwVWQh6AyhFEviyM5MydA2X\n5uo3LWJj8iCjyz1hRUqkbkW19Xqc+jpAjK1prWt5WS3edCqTz1q4wQkYOKyf\ng2sSO/1+3X/OB5ORV/262pjiNTiTGrs80/iEon+2RQ66dEnexsSLclQZm2uQ\nltNocSJaK3sF7nkgKxzbu1LzszZGqnl30uauWL5lf7n8qisEhcRR+0DK2tee\nYB1gIvwoDd8m3XAv3/e4gwJpZd2OCaZq3UPLzhdbKAoc4JrbcK20NrdTX+Gg\nbRGiS9YjYRr31MjYUrHX+9Xs+c/Qd+4ac/2B3FHtwdk7O6DOROyR9EEG/i41\nCReN\r\n=+Udb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdZAFPfa6Ze6iZho6CQ7bXz6pCeL8NpBjujQ3hb7YknAiB49Q8GQ3os0EH4pR6XdWMXwGFx+kaQqgywupdAYVO9AA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.9bd3e9e2.0_1585700163711_0.4346423060287232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-ripple":"0.15.0-canary.072084ab.0","@material/switch":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aGuxYbRJW1uw7nOYMIVhDt8dfsycOeQynNa105ghewuDMqXhmy89/7254kG05EJOJrtOp9HYQYONj0jHA+XPEQ==","shasum":"a57d28705267d6b2ce5500e9580c804b324134c7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":55462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOABCRA9TVsSAnZWagAAeCMP/A8nZDR2x7PYiMvDqfDv\nd8+qczTwrP45bPMk+RRIFOWY121VHY18nXWspJ2z1RTWjPwY1zjD/dntZFNH\ntUVPgWCTgtQanRwoVJ5UUI+CQUbEhQ7wurK26bQmbcML79sevxWi22uOB0rn\nbIhn6jACM9wC1rpXCEhRJN2i+zh0dzsskDA8K2+OTR0LroRsXFJfLdvOTxcx\nY2VPEanVNFGcMxaoZpYa87K61RaXVThn7j0M1oZpthJHuLvw21l7LQSCFcQU\nwj2U+5EAWNpi6eEW/by6SoBTrfici6BupGHy2kyh/YJ0HNGDJW+CmcuWnO9e\nqwipxWcJbI7oh2uc4icdMPiN9bDvwlok9RUS+gNEtIAzE1KQPXQ7RieqFGnU\n/9f6TRiIDe4iqWsCRe5bagGHL8SfnHJL+lWE10SDseKt4BEQL1dK1qkSaQ94\nva2wsToltbJllg7slM2KcoHWXBNqHvKuXx0sygTk7bbmGCx7LvDOfnjA509U\nAMtaDhn5iBWJCufYjUUtTA0MLfhAh/uS06OSrl4U8gPX2e1Qs413AmkN5Q+a\nIuC3f2KEKeBVCRip1/5fI48Wos8b/nsdWXoV+h+042nADrb8MEZ+7dFrowBC\nUgjJzJYR2zzXWGOIuOYZRb4iuK8HhgXGctAfKbHLQuaD9j0lOo8Xvf6EHEeF\nkp8g\r\n=6wck\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5EwtTn8Gzxp8n35xZ+Nz957+w7+RLLhFuJEnzhzWdLgIgNYCczGJ2s2xg7bulhY6SDSDykjxourZwC0OzXarMk54="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.072084ab.0_1585766401224_0.3102416893004949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-ripple":"0.15.0-canary.4dec04af.0","@material/switch":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-C0W2yGBtf8Zw1VeT1KK7wZtN40D0kvSzaPCnwlMqUSeN6Z13eVLuMLtKlf/jnFv03bc5TKPkodUmZQNWdoffvQ==","shasum":"869984e4711373e33de69f8e0866d80516da275f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":55462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zBCRA9TVsSAnZWagAALUsQAJ9jhdXdXXj60HUcUmiz\nK5cRI1O1cZawGlWc4epPAdLtyPhZvA2sTLAhTBO2josHbuiCSmW8ew95746S\nu07mN5gBSKaDTX2TZWtRgNU2Z8DkXuAvVJphzgN2ZXh6iYeo2RMyV9p/1H0e\nHz4OiqV7iAihnUQ52Dh+uj2akBEwiVsNMwjdAmJ4A6MIJoNSaB5jIiCG2VDj\nw9YL9nURt8cD6v5QwexhH3J2xJIK+lg+ry82M9rnGaoKsN0q35/k+lm05mHN\nP9/WMz2YWskThlzW3O1DomaUEVLMFyZpOolh04PkpeWw8F6rCBYhYyU6VJIH\no5we5L0TmfU+pbL23vc4106tGZQAOAgYSsjTO9tsVxhAwIzE5wrb7czqfK58\n+q6xq20UhrdvwZb0YpUy10taTAyLBLjWYJ4o8+pccZDxo+c09/ClUK99icOR\nSH0J/7y1QVsL71U4mHRVqudqSBUPXuB/IgtUizjnMsXH2u9htxOr51COD938\nTpWX5Bjvb3XX29lTU4sZfNVBnCHxgxtpPaUfRhMoxI6q+N7p1zFVHWaCahNr\nV7OSG3epkhBDKk53oQNS/XKFy1iR2qBuOJgZReEE9HO3SNDN1zEx+bQVUNBY\nIpuXihQ//UiohAxmPQJPljIXoLMkAFauU1vj14IblVt/I0JqATlRSz4UqLMe\n8th3\r\n=5oJt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMIsRBsp4q2xcPUBP8CXeXGnNyQ9tY+i4BRa/pqeu1BgIhAPgXPVWmkbkkx2O6n1nosLZBP5gEGgLAiuE/yRLwnHAu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.4dec04af.0_1585945792838_0.22591190106090586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-ripple":"0.15.0-canary.9b676354.0","@material/switch":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9zLC6aqadFTtPQvA2wxcJekCSPwHCSxs92r7/r1RZTRY+szOvVXhEvL1kezKB69Q3i2yh+3lsPBGMgvq+yug1Q==","shasum":"943fe3c59588ea883dbca843d5ced37bca1f09a3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":55462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zXCRA9TVsSAnZWagAAbZMP/jRfbt0n8vhQ1G5c8RAz\nCjn7isyB8jlJGNRKau/OOAuW5R9y2ZwIQw/QXIaoClcG+rguaqkspo7MUIf1\nmuzHKM58q//ZsCJvqk0A28kSuP+Y+CnMi3IE69dbseMK8yXjX4XVfPRYYz55\niwLSC/YkFxDVBeDRcIVvc0oqh/R76zNrR5PEngEakPOkEu+250LmS1hj/p3x\nWLHUKQDmqs6voZi88dGP0xtLq1Eit01Cg79JZheRyZmIcXKbVuC9bJXxOVeE\nOASE7wWwxobMLOhaEOqR6qB2CUl0rD8QIZk4WNLNK4C1ye1BWHZBBh03hM0T\nfxjm4hhxBYaj2sZJJ/4nu625IjKXXU21GozdabQkJPRrVRfCcMVAkYWH6l6r\nZEEpunpB730UCY4hnKSWZ2tv/0/0IouPLIMufYBsPpOhmnQjbbgcMr0rJys6\nD0R6qyPCsSkbwBQM7pPruWwtl9MV3A774PnKrRHaoA8bn6AjlJgGGQQ9Y3/D\n8Y159cGSt6SCeoIeVSo8lbcMJqkQuacfHmBrqYL15OrZ2TILdFTfBP4n82cN\n8997H3FOgVdVR6/xrgQjy8s84306sH1661G9gyd5FjhXkxF0ZUndw/2m9zm9\n2YLjggjpQmCgeYWEWJ11zwqoAgCaIMx0yDd1ZXUY+6clwNCP1aSGaNJCDe7f\n1ub1\r\n=nEYe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGKCQFXveOIjzHGsnfY/LDNJGKj18u3SQYDgim4O6WZAiAocwfJaMLMVWXYkjOA0pVikmsA4E0a5nfZm2g8flTO3Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.9b676354.0_1585945814772_0.9436276993994404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-ripple":"0.15.0-canary.6b946095.0","@material/switch":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kokmwGX/YyI4ucIEMABX8FX8uD/0FFIPdboACHhcHXOOPfMtpa7Oab4cogsJ2+rVqguqzTZPwv6O9kBvYaTt4g==","shasum":"5ae50d0a42ce760685c54fca9890290e84524ae9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":55462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mFCRA9TVsSAnZWagAA5YIP/ilX9fNSTD2RvE8S75aQ\nGjEq9CGhQr3G8deQzFjfIvmlBu6SI/FICnp25JssfhwXE5Ng0vXCnatBGW5w\nm2jS9D/VXfYVQJjz9Tu8yvQ1mWa42vcQF9qkACs9I9aEATCz264jdLDEpoKQ\n29GrHlMYKmqJJs6w0snCkCg+Z+9xMpO1T3fCaB9qlZX64bLIQnA6ZVFrDgux\nbG+U7n+LAziWDaLMV9ptRm7gq//RpmMO9zqbNQPWsC4FNsHaserHipOhkYO9\naYCvIqh26C7flQ/p+CnpGNROo/3fgGh9kMKci63p7Z+tMI/6E9yK+1s8cM8b\nm9Zuh992Jk6F40IOXslzm1IvIHjkFyxyPpX/ck6gMEvCiIhXtTAx30RcdyFV\nFJyeWNna1QfuXNvLtqt0TjSgXkzkJobeLnc1aaX+lmnkLXRUPLjd08AJf/tX\n8NPpWmqVWU+wc5DRm50SZR2G6oVo4IzWDYoSieE2VHITcHzcIvmQbE+j5CiB\nVAxXOF1wBNr9AppS6tSkBUltSR8AEoxKNRH61I6xfCmtuyD/7sNpd0PWHowO\n8MdJAqkUeyZC/rcdqNYZ5C8uNe9mBmgv1a1gZP8ZQx3ga7XDeajViKHsYvQJ\ndR5WExpGSPylzEDUeKtFK7F5R+akM53J44A5yACclgSkl6rcd2KvIFba2ggs\n6NAS\r\n=m2yO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBESsv5Pm9r7HkVmofiVRSikQRk3acTpw0E1FgxtnsnMAiAhyDzHx1X/f7zqu+xPQ77uFHeLJzn3w64ZQapTxJbQxA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.6b946095.0_1585949060905_0.7955262980779021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-ripple":"0.15.0-canary.5ccbfaa2.0","@material/switch":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tA3zzu/IqCmWdcnxlCgdJ+5fVzLqHgeNsEXojrJ4m/G1n9xVINNDT4t4jSDTka71xJaYrM58DbZfz6PlZsm1YA==","shasum":"2e9f6d40af313a70968927a5570d492979315038","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rRCRA9TVsSAnZWagAABDsP/3PBO+9+4jGYD4U9Osba\nxf1bz7cfr6SH/aw9uEWzbtZkBtND7ysT5Gzh5UTIOlWtjJCPhVcyqPC7F3v+\nVTXeB0jZjWpsGJduxuhXak3zQJ+yLui4H1OW+/ZcPciWKqr408vm38uGmh1j\nJ3/CzDKPhFRpQe6AuqAyfBVnB9yxj6behsVWvQ/AvFt8doVxdMyN7WiM6zHx\nSY5L9811DFfcEEoeLfK6mlKW9eoWyc5vibdDuGLCHzBGkuGtOljW2geOsUkj\nmKOkp+0Wo5lqGvM5UR8LU3Fim5efeTFOZYJ491BX1eq9rosVFViRV2jH7SHL\nNxAbVp2soj2RcXFxaV/sJbukUKxDNyaw7MmdbXZJ/16/+Rw/I3thLqoARcSi\npN95wEYpxwBISSpBxrkD0Oc+V77ZncEaD2vpFyCrxgP7lyytXNSSUHHT4Ch7\na0OEYD0XvUC4OyNS+gHb/fK1qJrG+ZJTgY+oLlpIuCDwfINr6QWxyMQIIOWZ\ngjnTPGssBZi2QoOs2qGmFDqOwvd4nS0CTPIoP/o91grMICGWl6QhCp0Cigym\nh+r5CrifI+pnf+sJCCv6kNwVFc9VY1xicpnsIDzxMlj1FlgcoONOlJoJnE2S\nUyOcki/nGG8giwjyJs0P0Jf0NRg9JP6GTG81CbpHhYFWz5LH9up9577Ipf7d\nel73\r\n=lN6S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSOPN634PDlZrZYQj+O2Z1Pu/sYcCmyh036PCmWBrV7AiEAtuHPPvhhOrhG4YdWNfzlfrLMX2koMIDCkQmWZIRbsBw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.5ccbfaa2.0_1585949392962_0.39914298549938776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-ripple":"0.15.0-canary.a0ab8772.0","@material/switch":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zWX2ebvaCiBpMCeV/EFisq12TmFbAgM0uWazj6et4Diq9zB+x8fSwiRnEyRkP5ZMz3Ts+hDd/9/HNvquLwGBAQ==","shasum":"1af3c4e297909c83021e0016aac74bbb79b31949","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3dCRA9TVsSAnZWagAAKeEP/0KpwP+gSnbH6ql+ocJr\nXmP7wj2tDwZ/ivolrCrab+S4wu2U7cq0UKwMMqTfIw+3GBvabjN8QhDchcIE\n+nNfTVRUgme9ORN398ELQB3essjayLB7KKcZ3/0eGeB+QMGtnXU+Qum7bFmf\nGShWtVEVnArc/hXkMT7+BoE8cd6l9RgpqsTJVaZj83pw3qCBv+carsQcQGhj\nJgxz1KdlX5pj4pgdBw8c/fNpleQXnzRDHEacpu5MzOpXIG4erln4pOVKcKXn\nFbXt8jhP/Gs6zzMF9wlh6ddSPTSmA1zWMPjtcEUf4oHpOpmfsxXY9HxCjRLZ\njFX0Fgd85Gg/T+3RAK+8KePuPb+RETvcsrw3ru6OwVV+DYDJHjnmpGHp9Mm5\nGk0Gu+pTEqrmUZ5UraC0VDyjJfcgnFxZurFXznf8kQnMX6ImtV8Rtiqw7hSn\nMNWHbPrZ4QI3y5hKvo+wkQ9emCNAkDmWKCCzqvNmJtNMufKY2fT2GvBJ2/gP\nsslyCzw+DHrTv+9Vl+bXbKhaxL7x4bFJ71rhEjiJmbsNT+pVR2DFJdbKWb+i\nlEYAoZO1rxl70IIJIJ2edquqK7GMHKBZN4mhS8qTBHrvU7G9jiqT2lApMwyo\nT3ZSThf+u4x/ibHIMGFuXZRsVyYvFwRCOCcoA27AA612mmWer2UfUsMd6RvE\nBasA\r\n=tQ5E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNkil8G1q04jL2mdUERUSIc7nunNr7EtZHV6E6D7VlsAiBmo2EofagI+oAd9J4WsvOE58eIBE5MJcSm3Ed2KhAe3g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.a0ab8772.0_1586290141256_0.846196291240584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-ripple":"0.15.0-canary.8d352305.0","@material/switch":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lIjqb2D2BGOrAfWvFJEKoRctkq2w5NbmGHTNKTc56VDfoVVNQGMedLHtlGHchNBJlY5XU97YkJLPZJUZWfs7Tg==","shasum":"476c77ce165ea1266a43ffc0c30c4c8ff64c2fac","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPO2CRA9TVsSAnZWagAAYUAP/RiPUZf2mAoXxouIRDoa\nQCNsajVLTDxU12UHi3+A2Qk6btJ823+7XLPY/GyiJZSz/ZkZvvnzliAJmGG6\narBBaoonWE2k5nb7F9I8UBtDyhgc5Il7ojqGRYVVfOFAU+HBn4GekTEbrfg1\nYb2eECgMSo2C4v7Tz6C7AdpuivcfjCGwLUajudORtlZtSI3KTfSY5SvyQKCM\nx4NYLAmGzxHeHlZGd3W9kh7PJTZEPYYQ3o+C9QRfHhs1DCgE91u45QZKFDnR\nqcf6L2PiogbBrzwKMLVh1AFSKZfHH9jSMsN7+OizQNN00JBFZ3iv5ptkaPsO\nxa6lDwcn/fce3Fo1fJq8TdZJ+h3NnpYcEv987PuSsi7D+w/bUvU9yiUscIhV\nws8TdelEUmgWPL4CC822rIlWyr3/Pv4ITDcWCWsxiwsj9rSX0b1tS2+T9lNF\naL/i9sQGv+nqQRNIEBT9SBCB0WYtFqfts8rLF2gI15yGnJq+5ukSfqa0mhtM\n+ymI059YiN/V4EeN7HgNmlup5oQAtEq6np8mlSD0C4/BT4sWVQH9oiqwbRFk\nMNVIZIA7HS/rcaLhDm/L/rlpni3SmraIJWc7VhdyLcShqENUskfOerQszGHX\nEk/V+hUntjbioNHy+5dGbbY3H9t4KFU/l/2JSP260RRvxT8ZWuN+bQfeGcgC\n9eVh\r\n=u1Ky\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVATaNwSdXDx8+YcZ+OcOQbqfTi0q+3zOgohZQcaTiiAiBAysRXNu9+g4o723rVQ5fCNPEgs9UkB77F/nlfZq4Pew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.8d352305.0_1586295734419_0.23847296312578115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-ripple":"0.15.0-canary.31eac79f.0","@material/switch":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-o8USGoXzo7GukgYxpIB8R5TkffqcpnZUaR/yGY0/i8T4F42rh/QaluLexQwDTeMsvPQmK6+nmPEefNlvRnF+aw==","shasum":"62fd03f13da493ccd6d0d138c141df40961d3b36","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdPCRA9TVsSAnZWagAAeFwQAJiXrZ8LRvPY3F5bo8IA\n/qMPCFUVoZUm1B464PvanHueQ2TSVJYwAdrnKPPrnJHPof6EMs93w2B83JUK\nC3xGVqd/WadFk4B1JJF2Vwax8a5iBpH8rZmXHpUrxVk6gHqe01KcujHZyt4y\ncVohW2rVLPRxC16wLL8oDYlRvGZ10+JHHlChI6cC4mk30ToOtSK0p5BgNPXd\nHUkgKoDPR1GBqQbd5Fwj2zKNCaW2NrjNLC8rYjtAAbacawk5AaGUlIP+lZM5\nzsgZv8lzAEMZFeoFN03nuLxJyNd+A1C3UfDXk16n7Tc/bJlutzX0W4E076XG\nmdfc5OXoQZnyP1KR528LY8C33U5MTxzwmf8VuKH0LHHqwTAyVTA2mU3XlWju\n1LxYDGKGBLod0oi7keX2+/8k5eCqIsTSTWw0MnFOGgaw4BRd0TXpjJfpYtVt\nxEfGtIKvSJ92uN63cHX9UnyxJeHt9Mb/L+sAMnMeNHLOv3IleGjaFAV3q7wU\ndQinh8L5NqnDA2p+VvZcyuTaaE7c8X6Ikoykey4vSTHDgt6WXyh39KpGRF2I\nN/VtWYiZ2uThVzJjL3fpz/0PGlc+nAZzbw/tqm/PkOTi37QurWgM6AUfRPGu\nSFEEUviDhDWN+e7yYd3gsmZ+mvhe9SSiXdciVN9Iw0jtq7aHE5WQmc1NmWrf\nag5v\r\n=wcwg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGI1znkG0ESpEN+CtTeonJuEr6NUlmfhPMuTlwzTIMTqAiEAnG35NehJaQTVvxzy4MLHl6e/ap+cNTTotICBLjRVzGY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.31eac79f.0_1586296655119_0.5141126946019006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-ripple":"0.15.0-canary.ba05565e.0","@material/switch":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-WMAAYcy/SBXi1cIexjPVgGXcBVFYpw/KENToO0fOdhJbfEVxkK2uodwPguRPR9rmjllAPcFTxWQRIYv6PvYQBQ==","shasum":"01776e236e0be94e4f5184a024bfc7ad9cc33b98","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgq8CRA9TVsSAnZWagAAVS4P/jCAEHNipwsOJnGd2U0E\nUjJ9MWO0zwOIce+OpXVOudFfvPBB0jfuarDfSvBDLVYoGjfeiBTq/1zAZpo2\nJ2X8wJM86bW4SsVc+42zL8F01JossRnjliLx8x4jMQEllh5QjD95NvegpG4x\nWrkLWv1CzpmEYVUk4vANXHQl39PpaWlph6Fy42kGb986MRsZOFPQl8sbTp9l\n7pvjsImZYa9d3u2IfAPxFCVUYbHMzXrKp4qhSToJjl7tbZsBJO3FOLAlynkP\nc9nVnNaPK7dQzCbtWLI8bCu2ZJWtX/AN3WMiLKFYDJb7WmIjN6OJGBdo3R3t\nlVv90k3hoc3SVhHMtP0pacBTRMt84PL2UiPj1sbvVDuNtxeLqzJ6+OKaqSfM\ndNAi2xl1mDeBi7J++TpiBFomO9QgrhFTPLVySI1e1fOnKoShJu9G36Udt6yp\noKNLWw18Wzd4d5z3itgwHUKa0EiT2EVyXbtp2Cw8bQ/dxGmEZlrH/brYufyB\neJ5t9Yllkwr/sxZF9b21wEoJT6bi2QaR9UVZEavaWu7YOPeUI/a3osC075uI\nVA62a7ZPS+BSV7Pb8a9bKi2QAY4+6Hzv8S/bLAkvhNBb1F2g492hU7N/r2ql\n4d5NfZUDqbAswHePN1huG2wz2WUnpOZTLQxkyoQXWv6b9GzEGvAPNi1MPiVv\nBzdN\r\n=cyWz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHw3PMo6v3QIX47M3/7OPjyDRIl9GhNgUzNDbuRssn/MCIQDv4ky7JnLv0TnpPaekwP3DTaK0b+DJpky7A3LtJcrQnA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.ba05565e.0_1586367164295_0.07914687175667212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-ripple":"0.15.0-canary.25099f79.0","@material/switch":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-PqE8d+VniOrki2Gm56Sd4xBV4eP+/vaFxqiCw3R5xWORqTGMNt+7C5pAhJKgGy0p1SR9lbT/mitQ0u3iHgr7fg==","shasum":"a6541d3649a9aa47a71eeaef32fd46b282d7bf34","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKKCRA9TVsSAnZWagAA9hYP/jKjkvc2CpniVuar6cd2\nFh5J3OEw3hKyA0GDPLi+Pi4Ld8i30Ow1kkB8+rfMCV5N9W1hCk8U48AEgM0a\n2YrZ80GlLfDGJ6LZgYNZQAJIy1wizWKR+ANQeGd/JGoZ0cRTlnvXOL7uFMMF\n3mGEr1UHNipR2QtRUGtd688I5lIm2UZeSTztkFVDvnnvdK3fhJO0W0n9plqB\nybN532t+mROP+hmUM2esCBeLpmu9I7xPoXYDMcH/PErQJvOP4/jFY7QYoWtC\n74o8DnKUncP/hDZe+0emTVKE3kSZ/JNQ8fy0yO7JXxW1cM8lcJat0NnVs9wj\n9f80XNVFWWYA+wwnIA3c+tpOANTlCyT9rmHOF+XnwIK3M9Y0Csd6MaeyJ8vi\nHMi1djjlTuIvcajqlcMkkVoM8Tw0hKWgTO4W2kbwzzVsLBwUTipg7Wq5UDHu\nVq2X4bbLZpMWxD6Zqda0xhvfE23ReQoVJ8RYyuiVkdZWVXrKWbOqfX/o03rf\nvY8Mu0PTNUjirAJCsyEbuVuq2sGuNYsBSAl53GGRDVtXVaUInFr3l2gmnPq+\nUGjiMPCgSFAeYaR9ot1C42cnvQktWN9zRWsl9cWPOar4zbLyq9b28z+ottWe\neuXnWEaDkaP+mLr9DamdMhHTdl9gubdxGT/ylFyztBjX27PLifNqKPMCfs5b\nxSoB\r\n=mruj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhVwiYXKnWLpDfiy2viPUtlL/FoH0nufjf/1Qk5OlMFwIgMs4DToDuBl98C2zU8A6tyoqgilG4YxTBfz5j1B6tbWY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.25099f79.0_1586381450465_0.8629046703248098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-ripple":"0.15.0-canary.447e31c6.0","@material/switch":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-V1l8ZIZIMcGWIawEbnSvZPdko99ETpANegWOpW1/8uEdnMEQ5Rq/Fsjc+VKaBKondgVhbGwDMBkW25Ub98RxQw==","shasum":"6969144d3dfce2ae562fc4d521a78cf3af9a30bd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnd8CRA9TVsSAnZWagAArwgP/iJXPx5misf3SYlmqT68\nDWOjJARH0qKAZY5gB8MDers1ks1n1jTvOIFG/XgjIOwxi/K47VrgiNMmAKlz\nXCbqRn2mtovP7VFAznSEA2K5W5sIXqgT/i9eKWkmlcdy+t3/4F/cTy88eCQB\nPmkwCO9sN9lUGf/lpPxQ3YZF9nmzJ4A0tq+ApcHcnHgkfU3KxTlvrztpoQYP\n3V8gyMWIXOdBeE84aYczAFmYd8X4gHwVi7PAlqcEqjtkAskMVgAhwXYFpnNV\nyd/8lfFt0t8V2rp4Ff3k3JKxRRXA3G08l8EhExs9sXEoTNa7v6jnghO3yRCJ\n7oVqKdxceuTK6lA10h4nsEIIUOtqdF/UVMU/ul+J82/bM7PlljMjFdt3/J23\ngq+ZW+mIS/L/jalxaaQfxfyRRsnBTbUoiHOSkH445ELNXMMrt1dKvLWL+Bx/\n2qf2e9yNA8g0b6SS/5NZiWSQYhVSZadt3nYZ7iJZsRRkvz3Uhwi8y3TX/B6O\nRYcV0Ld2OChl+w5OhmOtsqcUy5A6BUpe++tWw+lzgfmw5lNnaqUCoBShemXn\ndI2evaEq5Dl8yMIg4boZMlGTKdEtbbFYfoB9GHIzb+l3pLNVdNEbtZttpzou\n6PVJllyaRfi5QbJwnohiJ32vYbJapjGVJsAmGLLKhiSvVvGVh+2dxP3E5w0B\nN//x\r\n=3Duv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaYGBssQX98WYwSfyQfsPnERAWDbzreR0aH37r8rs1MAiEAlav8/r7eEbPT0oN3mpT+p8gAuIiGmMZ4P+ljwwl6S8E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.447e31c6.0_1586395003620_0.36841132615078265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-ripple":"0.15.0-canary.d6dd84f7.0","@material/switch":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-SHqPHABQeWYLCAwjMiIO96L5JexlTp26J7eYu/c6EKqcXdOg6w6ejTJRx+KDEL2g2O+iz9YUOAwFBae44N79Zw==","shasum":"6dc269f5c11baab9dfb8f424762e9a94c834e4bf","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnl/CRA9TVsSAnZWagAAlLAP/1E94wDc1aw5n8jQNp7R\nozRKxeXZB+/5FRvj+OS1q0GSeXS+AFHQGapMuTdKKJvEmxK5V/9/2HaDIf1c\nNrBLNIXEPEKV69240K1j7hVbnB7hUIiROADpJb3oLirDA07av/qaIV6JHZeg\ntGiW1o4qb/8BuKFNzpRUTXbWbuvpgwcmYuZWtpV1VzCLwSh5lz6PJ94165Tm\nkkcHnW1BSGIfAClweGqGkXjYlpx3Gm8HOB9+FHF/KMtWZY6MEb82swu46O7m\nB04g5wkP6UR47mZ6PqhY8NXgur4LqGZumV238se5MdMsmciVahiB9MVlDZnV\nqiaZgijt4TvDMzi+W0khpw2XICD9W3+dmXN2vRjRy7QLeJhVtuznOeuh1r5f\nTDEem8q1dPJdINmSU1/XjJM57h108F9D4tIplnOgICIi1plip55G+H95zbH+\n1mxtuNsaLGMO/M4jZZmgwE4zzfqgyEm1p1awWujVt1XEpABnAYapHuVaNVfQ\nmjQItJ4NJAN+dRZuDrulON2QzMV9WP6F0QGQKpLTHd/xaaiJEdKw+0BMz/b8\ntib4wOwsr94nNyPzNSVYIK5b9a3zBvYllHDJuiRpA4XgEFjkt2XszwXUm224\nX/GYPrhHr+R9il3L99IHePM9np+7Rbl3cN+S54i1F5QTEkLjh3jKnOayl48v\nYizm\r\n=ns0b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDQV5qfenzf/Pzct0BUGLEeiJOC1zYLrTPanO69zSB4wIhAPRfDZtC4E9rdXZ0GDPg4HJBUMMEQFKhR7SVltqH3NQR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.d6dd84f7.0_1586395519183_0.8273198536158255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-ripple":"0.15.0-canary.9b03ee68.0","@material/switch":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-XQ8oMs38XUaQkbSug+rPoxGeK8FxuLZKk0VMFNBkEDm7g91Zhqhv4lAAoIVeuEzrAVONGpBn/yRF3fGPhZL+dg==","shasum":"7e1a61ac0174897da572a6d9355be05bf480f233","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej390CRA9TVsSAnZWagAAlsAP/34hmUq7AIMKF9g0b1ok\nHN9xnvhURPWBFLABoeKJ1KZ2qvzhrzB9GlIMreCk1I1M+MiXsQBUI5OwwHFU\nm2Dge7yPf6nKpaSlfLl5okXl4KFtQLrWkiFH64m+XXfKvUThVcB91VMPcLaV\nu84cskq7hc5WcW1ZNz8z11MRp/qfMjDIvhilDYXpKcvykerHTKPrmdTuzyZp\nPVRzx8p6MoCDKhyjVWAx05M7cH10g4wLD5igQQqZOPKZQ9cKi1bTFZmZ6c0Z\ne+RTRazmUNEZSUyXymNyFfNvrKyQNzXZbxEfy9N15Gc3AgUlnULLyEX4vrh3\nxQ1AmL8fYWdi29DxmvFqQ9yBzqQ/SfdXUHfROtpRcpY3yq5Oxxu9alqaFJ4M\nv3i/0mRtvxNbMF7Ysq/q25MgCkpSeUWFdxZBSHnsIlGBFR+6Ru2xkEZCiyUq\nT4cuAU5KFH0SITdb+Bi26QGo2PIlGVcAShqY6gqFlXfYhE8aEQP9T0N0usSY\nKlkceou82bPusMnxxOLt1fdQuFnb7K1m6n5aNlmob1jOV3e7PGNNHi5I6tec\nrr9kt5d5FuMq1xTLewfySbzKIka8D1OeB9tHx+NMEjcAYaXSDcq0PxQBWSK4\noKDrI+R9nWX001EZTtdX7w9HMrqZdRSodGGf54cJdmDtaToDvuKAiXMkykPa\nlu8+\r\n=gh/I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKgT3xtMiwU4PMNeUHl7BuZO9stzfR3rJVi8W5S86N5wIgPsZD74Cum+wcSpHNA0/GHsGhVdOT+JFPXwHfQ4K9hP8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.9b03ee68.0_1586462580296_0.214350495274519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-ripple":"0.15.0-canary.bbc25b10.0","@material/switch":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-ipUi4j1j+EyvKJW8Y1txsGGzABv0kUauhKmR5wJC7lMVifoeMBxJFcVtcRwbdMCAAvM6mqxdZuPx4ysIdUgTVQ==","shasum":"c8258b331e86a83b4340dc08d249268fe77109c6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":55464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcbCRA9TVsSAnZWagAAitgQAIxMSaT+kD7FzHyUCOEO\nZdnRugGTRrM+ny/TV9miFX8qozSCvnRQJgYXw6x8ofxd/p2e5yubdHKEUZhm\noxukkt6GXdU9gPjMrYA3C7DHkF2LMDZGMMKAwXgHH3F/UWYRrrzupp7L2Afa\nQmF6rGAOcL2hFFaCxV0w1u5uSovN5TBHS7ceggsxbpzGC5SSorfMtss06dNl\nfMrl9nF+g1nobXIb0P4bKss4EzE6iN2d42BUChH/8lwpXJxf8ciTCXoXIO4D\n/hvW87DvyKr3MTwtPJzF2IICrI0k7wcAqvN91u962Q7th6A3gG2k3an7KzG8\noMtmLi/83Y11FdvUArW/9lb4aU0Iud2DaicBYiBOlVyqaMvJkXQCmEkYhXRI\ns2mtnKvFWw7SogEcJ/S26aT/vhCMGyN7yFtJKco4wSfFeswf4t/y8SXLQQ6M\navQZ/zwuhdl6KQ5w2yq0vGJrWPvGzfWoCsDUsyhJoyknm8p1/yfzJatXA8Pq\nDSHLASR5pgWmsNy4TG1BONMtIkytDwuj9LxroYh8WVOAxKiiPb5lS6mkCqdf\nZ3DPFeCQ+uojlNUUPwpXTm/iofBNMZq3+zHCq4Fzmpo4o9FeUYJMOXtEZe9y\nQoNJ2Kw/TC0GFd/q/8ATSZlX1pTpnB1hVBIy2xVcZCOW0bmuT4raL/+q7czY\nH2uB\r\n=0990\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZHA3B5w+8pRraGdYqrstdbWDaui8GFnnb40D89XppUAIge1n2E6Bg/nle+mx+45NPP8DP4+DssOkAh3gvPZaEV4I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.bbc25b10.0_1586558747105_0.997508748013979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-ripple":"0.15.0-canary.339cbfd4.0","@material/switch":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-b6NOGfkDzTtyxtsNDQWdSwUZElQ8ykNU/rma6+Zm2oovTF2NYJZaZw4AiXc7h3kyZr451y4rH0hs00SGWJLf3A==","shasum":"ab5ad06f5b993e7bcc6bcfccc336e98805e00275","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0atCRA9TVsSAnZWagAA0r4P/2oEfx2fFxp2TjZF97PQ\n5uu8Mcq6W3x3DjA7w75G3UE78jWUwhboz9oIvzC/ENca2nyf4HJ9TbLKMKJ0\nCuP83WdZGAluhUcTvWsbub8FhltpBG6dQEG0QHD5sjMnOc5woqHMnZbq6w/q\njfWNFBTym+wwgUB/PB4/Nu7j0jobBDCYD85oSc1pJPeE/1ar2FK7zwUdYkaS\nsnmsS/nwxi1HLJRr+Sayj8t9wLcwzhu4P40MVw/4fHwUNd8spKHKtuK/OeQs\naSwmc22hhaOCgMsMiPYZSS2OHibGZQ2kuyG+S9Il+BQHoE2irYlI5YXyvnl0\nnCY0/3MUwOpYiV19JDG3VxnwzHxo6napxIG7zC6EguBa+tmXeKhTwyJDI8+y\nRQUjKq+JZ5K8Wxk2MupoDRbt+PhyjH3v5aXliiM8dwthOKcop1L/6jSUU9Mm\nGa1Cyv+494hwoL2htvFyobXs5A5QQbbQvcFw32aQraFPOLlQ+AtJhPCibch9\nZpvyWQ+dCH0EbuYIV42xn4UVpPYILZAuWnaPiRNfgyIzE5o/ebgeWUzRrX9/\ne3WfQXNAsvKLnRThwDa7ozH4Ug7TqwEIDwjd/xPwuRSw/4drb09/YNJs8tsG\nFTx1LU6RWmkIE76tNL9PoYD5r5IUcJqG89FBVSPWc/3bl7krvv3lLtZ3EQI/\njaMw\r\n=1MZI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP1rgW9UzBwaBDdg1PSzxZAKukfo6KQ4Le8SAGWxtYvAIhAP08H7H7G9E9VhWmiwjaH+sX2Y+NiEcz/g0cw3Zo/Zml"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.339cbfd4.0_1586972333206_0.044334004842601527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-ripple":"0.15.0-canary.b74ff19f.0","@material/switch":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-90/b+e643OfZM13m/xUPY59LIYmXUj+4HzH7d3yF553BADIyrsyRd6GpyFPvrZZFGXE37ss8oaaFsDe4kvC3sg==","shasum":"35e322f0416498195988977fc2cf37918998ac82","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jNCRA9TVsSAnZWagAA+90P/R3r5VhdrR24thhTdFiy\no8Vzn8CIGvykc0dfYOD0AqeA3gEltJlVNaXN7mh7mS63Ra7E2ITQ+M7w0v+7\n/suFXFnSjB98GsYfDSoy+hb8PZdm6aQ0oOQRsb4e+EVe3XxbBcQU1JKqMHi5\nCnN0vOMYQMA4Lhyvg2H1atxCj1eCBvDHXzHuCcL+95NRYMW+wdqFtN/OAE7N\nQDMs4CDper1hRah+oNyNIM3QoYDDzxLiVb+QVbF5mykrXkJGO4qQdoF09GtL\naGoO9Bhdi+gNLDO5BDn4qlJjL+MWlCX7M/vZxrSDpABL9mUK+9ogvAKXbHC3\numPcrqzWyPOruX0cjp+pVd9oND4f2eyQjhZUWb7M8FDgewGn3u2o4WU/OQPG\nHe8CfFbpleZsDELxKZcm5AOaSq+TAFIDFDFYWu88cgmiEQ4zxmzuVhX01+wl\nffRfuCxAGb36aVEvGqGSj0Ro1oNG9137ronDbppfKMpF1Cf2E1kDzMkhPum7\nAsNoJGsp7+F9pehBthPuN3CrTj9Ida0q1RHI/i+prvRDgRLb9+YY3PoYsPFO\nPp9/UgicqA1Eg7gzbOF4mDiQgddILQj9CS0gouf/PulEztkPDtPFgqCYukJo\nYHFc3gZ3oYl8SDgPxr6kP0MtcsTwWS/m/Cr1QrSfYlR6mivSjEO5nu8nqsOp\nHOYh\r\n=sl3M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+5EXGEKhvc61qhVkz9noXNbZVvxJujJliEeNd5v9LqAiEAqP8bWm2F41+ABN66YiRdZcXra7w3d2cCxW/TdwlduXA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.b74ff19f.0_1586981069212_0.5053384220150334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-ripple":"0.15.0-canary.aaa16853.0","@material/switch":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UrfxGCBpll9mm2EhuMmm4O5wLKt/czm8lffaNINDvlK/FHud4ZCPzXZXTc9QHRnI19WPnBg/zOyp9BdQqxv7PQ==","shasum":"d6ebe72c69a234bd5d6aa7e0712f78fb48156fda","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42ICRA9TVsSAnZWagAAzuwP/2/c4NdTtgJGpQGXliaG\nDVifBOUbsGntWnZ7EN21uo6lwB7T7Gi7L3gqb5H647kFo/c3NO2wvSmykgiz\n/I8DAYCuTUBJ+H4f1k6mPKDbXRYAayZL5jHcN6VtOQQEYrQgOQylDmovXKcZ\nshYdS6k7NWJSlxMRnLTJ5CgnBvDtuSEixnYzRQJNnFFg8+sDtmcPJuLf9zA6\n+40ysxbPGfRUKhAw9jkIxfwk9/gRer3mZw2ZdUTJMDfw/6i6X/4WN8w+sPI2\nrkWV40oUQpCWD/jtfJ/oTdRwJ8pgqxMwq6x+oH0iyqSYbAUQjlHLgLloss/f\nRE4TUCXZFbl/wsHZ+oebVVuuqg4GKA6FlrIxmzPn7/KfEGPLrDtWKKtOGTWb\nI42HxEgPeFrg7D5WAUPJG7HOInaKHlniGl/joJ8j7qO5ZmMAkzBrbHx2ApLP\nNcS7aqlT0Vc3Qq08hXKWc54MXVyi6926h3XFr9xGYIJPaxOsP3VIuVUrFaoG\niNJoTInZyevFunlU3oTYY4eiHUroPZdpKl1j9FkmuGqWDWknYT/AOBYzx8Sv\nlxgomV8XmKD2ernQOaLFMXZXSJZQ/Q0OxLnXTAsE3COJPe+7hMzW31+WXe56\n1+62n4bYAurJl7GUoBr149aOAwaYccX9ZcxNov6WGxEJk4nsijEQDha6UVXz\nWnnT\r\n=2ny+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6JBuV4MxZ2IhDfvH+Q68kEfxYprMA1cZtb52gf24pRAiEA32VMb/+A5QJ9jhUVvTrKgUpPLhfk53tpcG90fKujqwY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.aaa16853.0_1586990471768_0.7804798407832756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-ripple":"0.15.0-canary.826b23e7.0","@material/switch":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Xv0siWqzXMY9m4xBwcqztQHrLxSq9LDPwRT6QAwyrFq6JTXTOpDBBClUVyYzSXkhJEtMTIIOrZ1gXX4gs97c2A==","shasum":"d86673818016110cb2f6fcc452fe8e34075a9e3f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqKCRA9TVsSAnZWagAAZLMP/ROaFVlo+vD0R3+In4qn\n5d5KUtimueGmExfJyCjl/cauUtZpx7QRY8oWOt+JIx5LGj00iO5h1csJnh9C\nPLRbZfVslM77wODOiXe5LDslupVcF3fwJKIhP5wgLlxe1l7d9Va4UEdGSJLv\nPGh4k6C+YZ2Mh7tU7mP6pJaLStc18kbi1xjeV8dTh0xGLwUGugLjpA1zRyiw\nUwYlpA5MhaOP3IN4Ou4wI56hRaw/pL9Pd4DW/4SwnwCSgF6IsVdaJqwAC6g3\nd1ncGR5k6n472wrWoj8cqGdOSBCkzDs3TTgIn26pE1xxyt6t6QL2/rilo3Qy\nTQurB49XEKg7LWOCvmGtlWV80ng5qgmt94kkNaVKJ8VYVp/QWBZuDBoUDeWx\n5MabiVXTlPyP97zjeMTCOyMyhALcLGh+LcA65hIQBEYRnwMbBmfvJ3Li/cDl\nvfz6J9M9LFjNrwRsuVCBePb5FMIaiCy2Hr7VtB2C4TJ3/l6o9UHiEtUopNu3\noPWtJ9t7oE4CqxNWhH1O1P6GpSdsl8gxstiO6xmOZuFgv6BXQvLxTa/S2orz\n/yM25zw7Vh5Bj27+NKxQmBOO+Srw2o1hN30vCwdBjicbG3eRipP3DrD12cwB\nXWWl0jctwhOvPrnrHHbljZIC/gN3HobyE/izDHcl1mtVnTY75LYj37eWE/+x\nnrJH\r\n=Qzql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQqsC62KQE2K50z125Fe49K/E2I9gNoFIikbeTOooikgIhAIiJKSrKGQxYBjwc5tlVO8gz6A93NBSpZpd0eM4yJ3d6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.826b23e7.0_1587063434092_0.4463179937133186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-ripple":"0.15.0-canary.e1ad2b2f.0","@material/switch":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7EwaK3O6dugET4z8LOFFmoODoxABHG4PdO+oF51MK3mj5S29JOnA9UCQE5OYc45h7YrXejVkI7OA/x9NRJSeJg==","shasum":"ed0981c877c6a3a69fc01fcfdd50ee021af0857b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVSCRA9TVsSAnZWagAA5XcQAIs0km6mEZ1i+cAle1aZ\nP8TIjH0lOPT+qGvu117u/cd2ePEY+3fxPJtjD1hE6wTMBAQsv0KGc1ehZJvr\nAXwQGo3ylynGl/0OYDToLmQZwnF04/raJRcx2lYvSbAsARm9cEblib1ksu5G\nMrhHdZf0P9Z2chVB7LrVusmaGusYxTrKBoNzIfxxbTwjkmQhV2eI7pUENh2Y\nUlfdqS3FkCc0h4vDfWBSB3mbKecQ2A18Tz9bIzF2DD2cJUy4tzU+KgjI22QQ\nWyMV7JdErD1zp/Pqo2JbaKfzmwH6WAP71i0WZ/GVAKXnGNY2KnZOgYMQVgfU\nnOKbNkZYNjt4iJyuSjpYL9TPxo0+jKIZ0jsXrgZ/OncBaDP5x8NFmp7GVKFG\n612TfvGt54jaEdxw13YDVDsSb6Te1IJHJD5b/YeglL2NNkEmTbw/YEmGISPy\nXS3UlvJBUNzcEFMaMgdMggY+Z2soBbl+irQmXojjsjZEdVewFqgZmeENVidT\nH4d+lO+iGghly7G65smwvAScpBQq4nqC0LYbOWe8hNIWdLOvJ3CLW1KvqRZt\n2UQ8ABalkWsxntH5kQWPH3kOsSYYG6KD6vRQGhohFVwoj97uTxwBcDvFH7ao\nLXncnhkUiv2vgtT8Oma0cIG1Z4HCN3wvGOvc2CV7FFkfwOL336vCg+DU8Uxa\nBwn9\r\n=0G0J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAa1NHXtni+a2w0eGvE8yzeJztoZdVmLoSz0XUzJNUHAiBqa/6uq2CwlNNeXN8oz01cSV7lxqm8tFH2XbwZ4bfaaw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.e1ad2b2f.0_1587164497894_0.8855317268630529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-ripple":"0.15.0-canary.bade5580.0","@material/switch":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HDJFUmeChzZX55HtENJ637CuYQ0wh8azReumRwMDceOkfg+RxdNipTApL6e+m66LHH3k0KL4SQNArODafMLnYg==","shasum":"620b9172323289b725a19978af0d78c475cef3d2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjl/CRA9TVsSAnZWagAAyb8P/AkVA6lIXvz2JlWtcH7e\nYNYeZXga2AF2zTclDnrk/cbLalt03md0v8TWsKymGr9JIgTdV4mvHrLjlW55\nehC+kvrGI0OArVBpnWq8fhOmepH9bZsK20aBuZXjsv+4kdxiIk0T+Zn3kcGQ\nwTF+GiQkDRmcjtZ7nnuFS2lfbWVO8lbobF6XuINt06uocAaDZtK9Sjdl9fTx\nKy/IrKT+1VO9lPxwoDMXYy5sXEqVp6hNfCH+OrFAqQ/UKnCK8TLpVtaCazqh\nXt61zabmL02Lu9Mc1moq681kVgahStTTmJDnRs5dJFXlYJPYTutwbBtupGI9\nXxsUW2r1sa9ml/YdmSIsCBbch3+oHEMk8roZjJYaCJqd3FytlblBlitisnRm\nnAyCTJ2ljt+xnvdoM1YZMv9k1zyIbbtc08MY1FO6M3x+F7N5Hv5joniGXfYD\nz/DwJJDzbtUqO4Ukfv236KRWtUJolCkdGguHBzVaxoSInUqSZeMo8feFK01M\nxR3o1HnNr+xCPoVYpozIiaeM3Y2QmhiVx00zA8z3kDwUQcQucy4WS5Dv9Y+J\ngFjFRde2QyAVacQxSh2QRyvGLeYK8yNkrPmd7bniNYCF4SRvWLk3wJyKTyOP\n/DNmU1poc9NG82sElDoPqU7hawux9XtWqZnT4XO9+epyecmefNrcbt404nO1\nE39U\r\n=aoHt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7iIbbi33/YyikD0aROwWgmBCJeWH7WekOBnLGjfotzAiEAr21ExiXRow6GeXuuDeQ0T7d0f/xYje6TYibr2Nyz4CQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.bade5580.0_1587165567236_0.30486337561093513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-ripple":"0.15.0-canary.dae38247.0","@material/switch":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-74Fs4Ti2jqbGl6XKBFx1fDVFh0CStCUmT+xo381v1keByTq832H6+8IXeylmdMp0bMBBmkDMAIRINAsktFr4gw==","shasum":"8422ff974eb4276e5662379934bb6e6a5e835554","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbVCRA9TVsSAnZWagAApVIP/3pbk25D+fQ/nxZoDmm1\no9RMFeCa3aJfTLJtxzxIgEKjHU3WSPMxqlC+sPOGcjhkGb33KirBa9AUi9U7\nQIK6b/rErlE0QcGcCxZ5adRoa5f5++0SprZW/cSPRvoTVfvxMXAxR2BPf0wH\nAxFICsDrwZR9NXf8e8WTRrsqrrAKWuxkRxKokmUgxtkDVYqPGQ7KCUODWxF0\n3JkrQZVDpALFb5+YkBKThf831SeCTl2ernmsj3h1R8nMdYRIZ7u+Fhy040ff\nfN2dM4skOzXywFJml+6t6gkS5xdwf87TS9antFDWuT7VC0xIz+1B0rvzz9eK\n/9jnJOrkaXTzf2LteMR5gDPMWmqbljKhzrkfjbRqv+GOcWbnjIV14DRmlupK\ntZyeYQWlAhbovXczxaDARfjduaUidbWpULJfwddX3fk2i4Ab6MyzxueALd5E\n3RiOTZKi6x344e0OancDzmLL84Z+7AIRn/9GIJTa+U5igyV4ukFOpXdQ4C5J\nXSzMU3df6i99+SedYbe6/7CaZIIFwf73B7QXZbNa/vD1BTo2mdf8EoYvarbV\nT/x7BchjC/cSOZQXg20M3cT1s9dPY7z2vTf3IjAhNhgZWLjYrrvFjdRbuQ20\nOSsnRZUf1miHlh8q+YlLG+UJOSCAZNF2WrLAKqC1h4jlMPGI2ODi+SESZgVs\nTHW8\r\n=Om7u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFInJw2R/Yuii2Xm5DvW1GLc5A1GAtr8qYLXlvqZ5JBkAiBtNxeJzTMXcFwZHrXFoXjyDYjx1llodKwhRSuoDSrNOg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.dae38247.0_1587168980593_0.16116059736691102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-ripple":"0.15.0-canary.a04c0b82.0","@material/switch":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Jd8rwRUXCFPY3kcVx3ZkE9A2CcbkiyCsMZj20nBH91LW/jCOAKo3fJIvtOlT/zXHQZ5QJj7yM9Y/P/5n2g5MZw==","shasum":"5a2c7e6c09be928423ff5daa56c6ecbd401270d2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksVCRA9TVsSAnZWagAA98IQAJu3oIzF9JaOhWGXrkzX\n11rioCp48gZAv/8IhnxLz6ikE+aGTykVIaayI1l9ALf/YBttknNug54/rNnG\ng6aol/Gzg9WxxV0BFECNB0VyAc5DxQLoMAQyraiVOQmSRWxDy4F40fE4UGBv\n5CNMHs3BbQSb8ibKb1roOXNxSFsQvIW41QtTcqqVuLpLpBFcRvZP7brVapqM\nuYQ4be33fxX2btZbjze1FekN2OPF59VBEhrGmMgT7OXVVHxHQueG+AuJNIvB\nPPrwF8WzuG7Dww5t3H+8HUenvxDynNCvegJS7HsC9DLWOPI0pop5NJANyE1y\nOvPqNaaON8BderIMiHoJoX0H/nrHcjwMMg4KnrSzwcU5z2AjKkviGUFC0tNJ\n2tMJPcXKFRbjZ2Sz3g23hoj2zPNY7lv5v8HX2fkWDSO3XBvzVZga/V50hDrn\nkyC8awgjF8FsF4+Zjdc3d1jbrBcqcQCKffIdDCqEGWYmnP32ISt4tbrOsrDj\nHSs+uJ9ycuf4ImPIrEi/TNmkaqBQHmaY+pCLulJFW3kxXGfpb+NRMmPS/jWt\nsCETb46jWhKUwjfs0C6VdfEF/rjebSUHa2NAL2rqnS5+XyCiKaFnazIGGfuq\nDRSbuPXcdKvHDyg40kGe+WW9ThmLtGZy+Pj/8Aocf3wKXo4IlXxMmjJ0Hmn0\npmWn\r\n=xCZa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtjP8R726FZeYEzzyOeqQB/wBVo0HqIweBrPboSsfDHAiA+wwQoc6FtUFiDwP4HxvrtmPDiYHc+lB5fLz7l11SwkA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.a04c0b82.0_1587170069121_0.28255745452500514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-ripple":"0.15.0-canary.715decfe.0","@material/switch":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OukLZWEpchL6VPcKZSaK+qkMeu2pdwz+zfQgZ2ApwfJZdkkHSDvmZsud+lfD2gkqd5jeeRx0BG9lIl7PD1cHLA==","shasum":"fb7e13880ed09a6ace49bafc20838a6c932865b0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetvCRA9TVsSAnZWagAAIawQAJK4Oipt6W9rDKoY2lNw\n2LaeDvLa+LRm5XUon+feO/8SuAhr88LhpfL7Vp1WGSp7m3V/TNWMMjwflJrM\nhI1zIhEkbg0ZGtEc08e2ltA5cZiaN4bnK/j4R8/KPhbtcDdbm8EL+xjTIPMl\nACx6/lJuhPraCxYIz7lO/ULNjW4KGMGboHrrXU6o0TQy5UTI3b1ZvqlsRpwl\n9ooPSviJkLsGyQGPcS5GfBVzqPTfYFGpoP5WeQc6+yp3Y8JUTzyY6uK/D9lg\nJk6ivSxzcoiUAhry6OtO0SNISwRHjot8OqlrTYExQ6OAcrIKYcntkbINdMAG\ntEyVB8GoRa5nuq2hw/heABCDhpZ2gWvV7wEKisEOagMBq6Kc8j7M65KR0PQZ\nyd7+QxC7Rd5BL9Rsce8eVBYQBm8e0cLRtbh3waoAV+pMEHR9bzIlJG7mGJvw\n4t+k39hY6Oe0JWxh/IFWTX5e0Xe4xDo5zpOrUl1yQWupGbyzeKNqh/t/IyiB\nNh/VRiEMzy+Jhj4wZ89BDn1GpNq4fx7LdgEFaq5ecxvj+51aU7twFFYozrxH\nmn5SdIoOm5/l/GHHMISMO10X07OeaRs5lkmwkFOCenEwDXLleijoMqsGq79w\n0mQhc5UsaUAG4H3wjmxXwfWpUWPugUgWS6tHDdkZeJA/+UZ4GUH0aI1Hgnvp\nNyt1\r\n=ofsn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIFlX7haGjVtUiY6bJx1VlQLrT97HUo5eH6npGfWJLegIhAN1XIiH7X9GzG2IdU5s1q2MI7VKDKr6/aD17JSuWb4d4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.715decfe.0_1587407726813_0.5453618112440726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-ripple":"0.15.0-canary.c862cd04.0","@material/switch":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CZJH4IdskQaOG3c388MTBo9WRvzFQKaREW4tS82DBTm3Lc0BV93MHwE9vNrF9dytC1jpM56TyxhS23rB9aag4g==","shasum":"c9d2356f56e31141c38006e0269725937f5bcc5b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVXCRA9TVsSAnZWagAAuSYP/AiQkE5BarJrA9y3Pdwk\nSokCGmaQXqkBZlljZgWnK1qUwWemkaPkOdtk7F9GIbY//ZxvLPnbbOtSM0Nh\nwoRrdKt5+blGfEJG973MsaptXf0voZHnrHy6vm0V/VpUdVCZMHMi6mMyhwcT\nEQkiXsbPg1xGhbWr+9RFfBeXyX19Wwizy5kEMV6PSWu18cODB7ZV3MgRhrU6\n7D2NRIBAfTguyfHDr/DB6FLUPMtxaJnGaav5q49dEgWgBktqRU5yVtTfhYJY\nUU7ofhaw1ThVTKTIh2E2UFuZoYP9hT+1Yqcsro/2e9AG3xjeXoBHHWBsA+td\nUIZw9R+Jf30ovKqk6r09hf/Pey2g5sXbA8+Ys3QdGvWDJnKpMR8Qdo6JhiGH\n32+xD6waDNFqKrd5xKubuCqjTkSwcT8EtRrMPQ1Fr1l4l5LeMsO0xb6wG3lG\nmt7MSBU+J5xZ3Kk9p9ozA2i5b0Oabi2UQyB5/emJlDmEyEqn/mEEBauJb9L+\nyBgR17cDMcQ5vguC+QNYUKv23JlYqtzHpIY0ckECNgwKoqsfMKt7Nrrp0+/M\nm0h8Qkws5fkmr01Md75bay/2p4k51T3X6uVBwlGTjAqHA2Cu4I87wJG9DMlo\nf7X97e5b2UZH5bI87Q9kT92VyIBnGowhbDAXkUUmId3Sd+3PLVZATAnQgsUU\n9rwW\r\n=iwcT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe/73jMroTRJR1kitpPUEUHjCNnYsonnd36LSQd9lJlQIhAN2U0gABvk9GiDFhihauAp6Q6/Mr8162y0DMm0FONcC0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.c862cd04.0_1587418454858_0.3744651219029953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-ripple":"0.15.0-canary.e9b01b35.0","@material/switch":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yRhL4Blnsf0s5pW3n09wUFBWiWaHbRBGTwlhFX0ZGOflAWHxD3np8rlquNnAlQHun7Abi3N+1MI+BPSZ90BPpw==","shasum":"a0a58a9e1f98a95474f63b8e68b2841e0e5c0fb7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBjCRA9TVsSAnZWagAA2ZUP/2AUc+z/mLW4vPsrbkZT\nT3z8joxTGqGbgYYJsnB12OW7bSD1d4UdO8k6wFApjnqBn94ZPX/ZTEy2wM64\ni2dW80f9CL6BhQWCTv/0oq2PlgnaGoxstJ2phkO8KxBtSHMK1umKU+VoW+su\nZitZ/kLkegBX64J9uqTBHAZyRWo87dh6cDRjJPi2BjCKTMnxAt2jgXNgJOV3\nMN43vocdQFOcohGFwkeeJskpHzmvsCySNUchQ9JJurVOcG3mhP7jXL6GTtUr\nuasuajNZhbwxioOBlqOoqgbfGwDPQNP0LV3S3kwpdBa31xiDitFI4oc6fvZj\nXLvR88TaQ7aNRLhj4d/YCKWVzIrTfBfY3cx7NPBnYSabVWDXPBzAIWWekiqs\niUqCkgbGSfT1I4XZYQmtFcvRsOfYyEUdJP412D7oQeaaUZ+U37ymdDxDhs4M\n7K9pLEG9fK+RXAy3VZH1pswwqzJQCJM5m1IaPGG3hhqeg0F+RXJJUGGlSqKr\nlTzASrdEoL4CZ47avEnFZeR3PyopD0RWwbHKXBTEq6nqXp6mOuezUlDSoYwC\nWmTO8eYtmHigeFDUIHKFcgd+KN28vq7Oq+Us47wgXdpIBpxhmTiS1euw/Uur\nWbDKtMOT9KpgmdT2+lSfjdxvMSEerWl6Pu42zmCFd2nqH9pUeOTN5vMBDlTm\nY0En\r\n=MiSD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAKeOPOpCr49V5AqjuThKF/FVtq0Ud+ncWYiEP7RlBzAiAef/Nux82y3CW0N88hlL5hTuMSbySBF34p/NR91pHQ2g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.e9b01b35.0_1587425378625_0.37886926569697876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-ripple":"0.15.0-canary.ee7e8989.0","@material/switch":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p43FQ6/U+xAXM0CgqIKeEYq6Cca8/nqhV1UYLdTuO4fDeYV57yBaFHm0Tln8EMunKnfWNorBY0HsjQDmMvxetQ==","shasum":"00c771a9342fb303eaf99071eeefd93b1f9d9df6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkORCRA9TVsSAnZWagAAwcAQAJi5N/6d3hlkgUC9f1o7\niHnV83NhxoZ5/tMLf2thZ6H2mekr7G8RtvHQNcd2eKS8gBOCuxj3lb1x7Qei\nbExf2mLUNX8vnkSnYjYwcJPfVhDnZR/Q6LXr7MvC/QwnAQnCw0rcfpwu47X5\ne617ci7vyZR3Qa6CLOSWJzf/tdocM2+su8tXLEpMW1Zaz611E4yy/tqB0iLt\nzzmCcMCXOzY7T2bTPROJ3yK/2n9dMCbK5lD/1mT9mc27JECHefOON9f6RwnE\nZ5W9KrPERWeJt/NN3Z+iStlyBSNvd7yUYeRq+t80s9odAh7VyFlTsz9JU9l9\n88JMoGE4J0Ggqv+1ktSmSoYYrd1HYPVICc6PKKscWukszZx7b2yZlIQ25Yj1\nsoYtgXE0aZHVnrUaRU0t+7+K2lEd5I3gxytbL2KuAqvRAHU8vteUolNqJP3d\nimIuLMmZuWX15PZmfscMxmnrKSVN6m3T2Tc1Jl9If17ePcXQutWWro3E8AUt\nEe2XJYwq/lgkETNsg+5rjBuPy4NE/giGBLYzAWoh9WwC95MVqThQ8nyWq+Sj\nR2ItNvpzHewEkkeet8K/IPFVojc2iDewDD45Tnk9YhhwE5WQkkrIk+UsxaiG\nUwkLe7u+4WDORSS3M5vEsVCWN+K48IzXgbUq6qSte69i5qRVrOUGSf2hb2h3\nx/F2\r\n=RH2G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3AW3/HU1KtoV11oMfkKzktI+Q2KBg5wpM/BawWvOkZQIgIIoW36a5EQBylot0AYig7oOaUx/SCi+B5jXTBKwnjKI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.ee7e8989.0_1587430289313_0.967146188294935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-ripple":"0.15.0-canary.9bf47ffa.0","@material/switch":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+Rq8NwqHByYtqazfW5JHJDUblLWfKPKjW2xiCyUm+IvYubY0EDQkUD4sjND3dL6Zv8kpqFJgs2Cs69FvVwHC5g==","shasum":"17bfe4bad6f2a1ac70cefd1fec75b3f5b9ee9510","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2dCRA9TVsSAnZWagAAPQsQAJayOssFDry1Z7Ephw8N\ndq6QYJ9nSqRnQ/HlIvxoN0kLLBHhGCX9GBm97QeSkVOQrGIkIg6xiY6kdlPC\nNpUhP/rZmkf7oLqGd6Z0czZ3lb6zR+oPS7c/cr0xPBxA25FwqNQcpfNpqvLu\n29Ieqc5eHpZHkZPvN7/wriGjEKWJVEyhUiRZ9c0sLVOJ3b89nLVBro9CHuir\nE2w4Vv8pa/zdjk7Tygl2DALxM6Kh6HkYu6xAUDJyJ2KNkMef7wa94r+IDZC3\nNGmZ+Oa8bChxqTK5+0X16Dbxdvk1lCHDRslLf3Iggxw1ownCUU7QcWCuUBMZ\n1CCl7faysCHnZuqEk/kbdvJtZouwmANid4hRITy2uoS3GkdxEuqX7x5izvMO\noXQ4CoBoEfFzYmF67BRpnhhzJryOCsgdAh/A54agXn8F93jDT6LFugzBGdVR\nzrQBqSqaqXlhrg3X4MEP2IdXvjhOXk0r9FjiPsilPUxUGNlhhflHBUsJXARr\n13TvZw3P/P9rZsYkWSyx1AxqeR8qnKN73yde23E0MRdoAqf4RZSuYfxXoBKi\n9Flifwpv4WD4HVpVOfeF7ytaMqUfMtemF/CoKjAeld5HS37zIbFvQv8xdk/a\nwtYSDEWe5MAVJPfz0+AODPkbbXhjl9BdhQ4nbx61Hxrhg7FG3WRWhaGACC5r\no0Sj\r\n=qe3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJ62vjKMNIH+kIwz6mLhO2OeBugfgYTPVXv7Tszpq78AiB5Wxk/G4oafFVgreDc2ypAYtP3O26zqll8tRwSP2OsWA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.9bf47ffa.0_1587494300755_0.9129665844372914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-ripple":"0.15.0-canary.078dbd98.0","@material/switch":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fRGnDsSg582pRcuEapZ+cybx/sL/XE3tIHxCAr5A9Z96TMRwOwGpFu+pwqEvJfNQEin6pEff1lJ9Ewmq1Xa7Yw==","shasum":"058b67bb1ac0e72e11a2c70c5b448706c6585652","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2G8CRA9TVsSAnZWagAAMVEQAICma0cUMRsciISiEJVb\nhtLbfnRZdt9c5E7UJNyJPesmMDL97LlLkVAz+/SkgpDee1S18Tl1C/n/4Skr\nBXShqYppAG1Gei6jvb3Fq9IklN+ifpqfrTlgflGduwMinQPUFOmL2lTHM+Nn\nMZbls2AbQeVj2L8/E67YNuDESJjPU+PqY6OFd2agZkRPWKf2dJhr0/x1rwBQ\nKudnSbU2+9e+Bk0arc8eSmQ0Fi2CyAtL5wEdtr7GqKRxRBNBrtA+IK7iHbwR\nX19gBp5wEXWnBDGK8FyKj0EhXTbUSPQKFYAzmSFpeIMofIie0BDfeEnfSui9\na4GUB0lF0qM9VsNmtKn1blfXQDZ3LjzBR8d2vFo42CNNvXtmZFw8w2jXVOs1\nzrATorbX6OhnCplskiZTvvofFdFcyWm4Gkrw53N6/reF1GBxnV0GjOcXv6Ce\nNpfzOeIuAXkQxyQWYccFIAuPv+OYnIPtW/Rz0lLBNzZQ4OJkyrk0C+ye20sZ\nJdN8DhMFpiq0r196r0Wa39NBUEp/tvgZ4W7nYWyVCyCpa/88W2yhC23JzuJh\nDUmrg4QJhpPAuD/lpaHRGmbcQSPuCSKND7hEN66gU6X2/D/ZqlyjzmOfcAA6\n0FVw8dLBqwY5+n756mm7Uvo5MHlvQ9xk5GyhdenkFGlIjSpg6I0FSpzG97yw\nC4iS\r\n=tCn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmRIGiYZ8g5XfhJ2uK9tG/D5xXq40lvQCSvdKWfb9ucAiEAh69WVa+w229PoRE6L0o2FsxBXJoWSe/AQXVdY7dMSz8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.078dbd98.0_1587503548462_0.24807016040594165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-ripple":"0.15.0-canary.953015d6.0","@material/switch":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Fm/1A6mmXXeh3iwNjBdf38kjweod21YBao6AwIc065U5kZ9lYVrnd32VDw1QF3P8lL2096N7zY3kC4neai+usA==","shasum":"39926efe3cc145e3743fc304468741058231e20f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2c0CRA9TVsSAnZWagAAILUP/RL1TJv/0555xHNr+UVv\n5F/CSp4iXnc2+VJTiqrbHpb76n2rxo2DVqbAww/QwYN+CXzbnHd92A5k0UXo\nlhQK1Knb45GozFg8sWO8sOWEFH+acJtkihJD/45Cn6btU1zC1Wng8YQuM0NA\nS/dW3lr/lzYVzaWb4NbX/6kWELBPZeak3rciyaGlnrvn20OiWPtyrSvuL3s9\nrEgPBOXtSwooJx4WF1o9FnWina/XhNIMLNDNazjpjq4upA1G4Yy3m8sust0o\nR+CeUE2dQ4eyjPFitPGfK1GitH5d3ILgQQbSzqcnuPZkKLPXu4QkMPlCrp0G\nTJQqkUv67zImaxcRsyv2MuEL1vFaFg1B9ekR5ls3D8QQG0xiJGpGaSdk+4Cu\nqdBz+bsRBcfB09zPYZV7k8jN1N6W3K7x8CT6JtjXMVE9C2m6vw7lDBx9MIP6\nC1FGk3jeV0MmnfSdWPCwuRhFpGosATdA5uG5XmqJAZ4uz4dISvHOF2+o7AeI\n2Ouvg9AkkDN9rCCidXEybxg+6UEX/NWoduFemzfG77M1jeiExmDExSLD1I0v\njbqMpkABhUSkIguFtWahzdzXUaZr4t/A6jBgwzAP/NeG9A9HueAEPBc/QA4u\nXkbRiRwoY77w6piHzOgG2a6EEZLHQxZ5GgP1bK0EMxOHXgVSZeR8718BSNfj\nYbAI\r\n=n8sq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZC5QJfLh6B5WP0lgwhRyEgs6LOSErAIUPzgfLfMt89QIgVP/tjirUvVaEEWr5AuYjgUyvbfTpy9vQwJx0foto7W0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.953015d6.0_1587504947924_0.3506991816116356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-ripple":"0.15.0-canary.c360ec63.0","@material/switch":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lkeGKdLUCIhZOvBrESHvqfupGrUp/tNKMudr38631lekqY1r5fVttq5RwznN+XzWPjxVBASBQva+d0GJojfdMA==","shasum":"383b8ac9a65ea89e6abd130638633e167f5d1355","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yrCRA9TVsSAnZWagAAC/4P/1//folggeQpeiH/EDie\nbXDi1gOOc8LepxB14Pd5hdjAhcmNAni47YYI8q2i+Js4flOCSr7OMjFe9zQ+\ntD625d4/MLOJ3mgCKPTKC6xgKG5M3K0us6nDmDJalI5bjsF4zfXgxKqcE01y\nTJz9/Z5Dmkn2sDxQl0y1t5o/V6BtWDOhyuYIb5yb6b8ufQlyTvzo1s/ZjJ9l\nJKYVc9BALIKaY0Rm560AR5jJ5HU9TDOEEbkAkDhj2MrOSgCVV+MwQzQVs3WW\nQVTraSnhrbPklstNd1QnOlrGC6p2aUWxr1cE71QpwMrdXgfgf06mjbHf9F7H\nbdWA/Dxsg1k3WQT0diBdP0pHtWvCFvyrxLB1nAPgJPC4dNxxXM9ioIhQEN9a\nxmyggQUafvscTLwwZgrsCgsCgBuH1XhdeZ4A2h0XBQ/AfHerspQbs5mArPUT\nX4giuAIrKviJNvqXsqckF/GMoXKn1TLjerKE1bd74xi3XQsH+KTUyuyt+EAE\n/hdIfpd9ar6VqCIENW9THcvboDJHeAy3oUqssd544r5JZHEP03ZtdFmaBw4a\ntyzC1jLokS6oPCFWLN4JhPCcSqeQHeIq6OQkvPePZXIk7BCcxBpYIXIhttbi\nNzvvHNa/ITk4MMyscX3jNX+US8kq8sIXh0ePOty5qpsmigcY/QuuU/D4FgNA\nU7IF\r\n=zfpa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUzDckpyLCMoUmSvBlKuoigoN/9gFMERCkDfja5St3/AIhAPkmc7fnyYZZWbQimnoyvR9QFHfaoLZgbBSoKtNwyOIT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.c360ec63.0_1587506347168_0.8146757426945168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-ripple":"0.15.0-canary.d71b65aa.0","@material/switch":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yRVFDraUecDh+8NjaGcBR5QIVHzltrTtqA2THZcvqOJqXmqWP8x9Lo61dHo1l7rKyYux1GfZ/rWdtzAsx4tqOQ==","shasum":"9f1e8294aea45d462df67f344d0597e9464d1047","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3XBCRA9TVsSAnZWagAA0QYP/RngG5oWfer+OxvPf6Yf\nE6OiD7FbMypy0/WafY7gQZ4+tcKVag4YV2TSTOWVVUP3ihYMPznITX+NaXR1\n3FvcWU9iht3C0RCRiyTKziQZMI4UfYYS4sbUe9DqhyExagY3SCA7DkPoXJtS\naRVwFmRlRT5aRR9PjDu/i/e7V0zx6TzvIqkusSO9XQtQlAiXrdEsjm/5lBB7\nmJ13WiiRpz3ZVFc/K4jGAnvdPIlr/Z/QV5eUtTW19CPx0mlEdAEgt4cBUCtQ\nXPLfnNE97NA+f0RBdUiUX+7DCbwqMJrGFX4T6co7HCe4MTDABbiZtYcHvaev\nBOXUudGcva+7hsE+mF86W2ISWTXA3dAB04Xmp1JwJdNLFkGiu3zoISsPj89V\nIsMGj7E2jkEfMtzZqgd531MHJIt79oRj/G98IgEbzgFisY5cnCXZ3tiPfkZe\nPrPOcuJbHaV8REp99DxDE3u4bcM2QDvxBl4zkW5qi7LJ3eaJ7MTBNKFfnfoI\nn/s6O/tIDMKRYaPsx/BI3CtvIp/VD8FUE4c4eexJQnI4VVMN6PySsug94sKU\nbGeJDiW3m+M9SWOSNywOoUbW5mDiQdCR0aXUD5xCHv4gUaxHoQLIJc2BbNI4\nVWznOWlaXGphrXypTCjzW2xc0Z7lyaNtcysu6brq78ysOY0fcn0OhkYtfbQW\nRey5\r\n=9N0b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXq5/YTLt6FJxRsKmhu6rPHXPF+h7QsOexkUKVzZOTtAiEAyRiiD/9S0iXt90x35pGFHVHay4YK6K4nOVm1SlTDWvw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.d71b65aa.0_1587508673287_0.9744084807332198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-ripple":"0.15.0-canary.58d51135.0","@material/switch":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nnZIYaKQRTjoshyXYFZqUEMQaL6eolgajwAlY0Jw/zYRBaIDI0f2T9X9tsY4mBT/v+nFaPSfpMo+0DlaURgClw==","shasum":"5e08f5dba4cece222e77c4b0b902965ba4c4f1e3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUQCRA9TVsSAnZWagAA0IoP/1QogdXAd8NkQyK2RUyG\n0qJIXHY04eE8ax4I3Xr3ct26hWXRxFeC62AQi/6j+IN5tn9Ic3NN5iyw2Nbn\nq1e5T9R+Vgy0J7IC1oTV2elaBYG7iZ8+VfKeDOq0oeJo88wh+gBS+VgRVR6E\npnpYLJ4nncy5ZtvCoOg30OCj3ZLxArzuuGvbD0FTIkMmOavcHQQ9n5sDWxV6\n2+0MgGX/BWHLo4DpMJlYUQhP9aKSdet3vRZCCdZnqomD9jlUuYszzD8cyWvO\n8GiM/EAmkhVF47s5HualuljyCseV/W+F9nraCsz4wUTaau1w4l5CeYm4Q+v0\nXIPaxflwn3oX3ThPE1asZ7Y8VHxIkgldGCbGhvn027tLK30kiIKgQ4aPzA9Z\nfIbupssayHvB6s+XVcG9XlJ3vluxR796/Q/Jc72j2FA0J9UcJS4tY4qzw5X7\nEr2G4lfqHDMwbU3u8Azp1eh5eLbZFm5RjSXNd3J3bWFYNaOr+4NuaFdRvGrw\nCe2sg+9+8rETYd0mANafpXAp33ylloYXT2A4qAAbddaPx06++EfsDiQq0ICh\n+tZ2CFYBfBDGI+ohmYcV5j4YAy88VgIL4okw8/MP9dyzKdP8c/3dSR18UkZH\n9bWKMt1akrMdZQ8P+P0SxRask95efgMMrMfM4B+v/wPgAFjqIMIMSeWRncQh\nJ/Ph\r\n=q1+Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgLuv5kgJJMzFUZztH4ieeHQ6xZaXjjyLaKbIjelTw7AIgbRM94Jpev8nDR3VClFR6Zf2MATbGUYvVB3YhMsaI6Rk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.58d51135.0_1587602704412_0.7965755449019636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-ripple":"0.15.0-canary.d0af8ba3.0","@material/switch":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LOxUdw8eZl9WHPpdvqhHxL3Rrtm6RRpeIzt0akS+7qzVpfMnDqcQr01ZAszWA7PsQWuMblgX87iLL4cxhISKfQ==","shasum":"263ab06571da9020a7ce874f38033044350016c5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodn/CRA9TVsSAnZWagAAzkoP/297/gaM9jATxIKn/6BR\ndJPY0Pg/afrat5vtpGQ4D1GhNIxx+b0+a41ElVCJpdyxw8H8fllyot1Bu5IC\ngZBda59n2tisXuH/OqqQLX67QXwbWHeSiL3hh9ouUYX/Qp2gIvQ0FGxleufg\na8iQkJm/weH4dOmjOn1GZOi9us4z1kGKlPyvYrQ+/RPFlpleHOhF2XeWEC1X\nzwnGEmJ8Gv0DjeR0ig3vzP9iAsKhRUQIISJYtBTggwJXkSoqjHqOSP7DMCWG\n30hQeOUIKhhnYZRBVDg/Hobc3b4qxYOU2eSfXOSzHVpVCsOEpk1WNHjQNBQ8\noHQJF7UHyb8iRHC9s4nKBSD/Cf7D+YTTPRSijfQNAlHvbYWVb4qbB2gQcEdt\nQj15Lj+Dk3Kwll8O8bULe0I9+jsVoBgmu3VJvoy23ZaB5RiG/3pSHG7ywIHa\nKyz+fSip/cIc5D2MYMGP6AwMUb5BYHpIwhdQZFWJV0tGjP8yLmBFRw05kmnK\ncBfvhG34p56i4KrjrpTRNqtHULpJjTj4QnQtpHjoJnTLV+RclrgU6ROMGywG\n71L74oqQtlRCg7zKqP33MFbVNplVPigOGkGrD9xBrSS6TZ9SCFsdesmBYhY0\ntOgwuWMsPor6wkqFmMVLaHiGXfhPHlUvbJSfdA3z71jTP9CreuXAX0pkVlVT\nYk+n\r\n=ETQK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9lD0ShIdU0fQrZNpSzOFfNEGimFWG3MIrqxN8TfZU4AiAcyo0eHMLSEMt5EzPhMzWMDGrmhoT8eEzD18XTF+pCIQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.d0af8ba3.0_1587665407038_0.5742014184000224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-ripple":"0.15.0-canary.8872b17b.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PcIiB0JPXF1JMJFyriomaAAxmBEiZcF9LybyiGHyRVJtlgqIIVKItmTBmIcnVsBkpQAbrUygtxX0WKJgg3gWEg==","shasum":"25e781e8fe37d77ef6111c60613b343f79857562","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1oCRA9TVsSAnZWagAAKwcP+waCwSHWb0zz2Gf8iDis\na+62bAaEYwMu5Df1SI1WVLhcYE5S5rjkOZ5WzZlqNUc2o/zwrTvbePcfRCMq\ngkRN4irbhf8iNQGpBU4vidxQTKUfLWFGcS0xBZETkQQz8ouX55or1UxEpF7w\n6xJnMxmbOfZr0xR6otZ9CVlnOZKhNA1sl6k1zM/d9VYWnMz9bU1DH+fmbXKM\nObD7n1v+k8ekaIFhZSDcfhftU4rbIn337BlCNQ3ZuMv1zxutpa6mMLves3WD\n2lTIHV+6AkGtVw4JNVDT8bRIVTra61t6ZD4fk8prR4JgLHrPvviUfzo7SEX3\nNlOEicfyfnhYTQXTHJT/fVuq12a9eo+sEidHgvmOpV0KU+LqO/5V/0XqS/tq\n5DybZUw2tof2BmGObGVWnPaQdgVoiD8VFbNkTRVB5Sp1+dzwVDl1V9bd5Fi6\ngjApeBo8RiMg+uO9p6OR0syeh9KVUzqqrd8FDvMyq4sElN/yWxHsvWpANUTe\nGxRNmlKw0XTyDPmZfnBC55zu9C0PO9SV2P20F91dgAsF6unWO5cApDju4uPY\n/KtR8WR/x1Nrwkx/Ujp3vhvd3ruiCs6olRqnThC8cmtWXGmFmBhwYr2KRI6x\nMyCghog4e8DO/U82yFnTU+OsG7k3nOaBmeiIg4hUQSrwbSmv3G/mqBGorD/5\n1CYd\r\n=NOF9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvHQDxrE5340WSD2JdTzcE4OHjHRcib84QAXswAkqYNQIgPbSW5xpFVc6so74xzeHN0w92QLnk8T7VyNrQTNoHVBk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.8872b17b.0_1587674472373_0.41751491748376024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-ripple":"0.15.0-canary.eca1a610.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rpK8o7sCS/1GCduFk7RqyJLYn/ZYeTgDv21uXGhPtFOe2bw2/Tik9kjnLrDXrNScVfyNU96y3LJMgl7AVcm2Zg==","shasum":"d2321ef99e5e464b5326f42b368e506e37bc76e5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvwCRA9TVsSAnZWagAAvwEP/1qLHdEJfkyrPD5/yPnF\nVuAsGRh52PzPIN/eH4UxcF/D9kb6Gf8H5ZfeQ0VECSjx0Ez27GnGGzOWGm0R\n+hN1KQRZuaKBAX+k+FlkEzNScdQgXi1VEhR2WjHyNv11KJOl90m8/+FNhnIx\nFeaTCfPyipf1oYKOs0962iBvmC+LQUf8Db11/7VTkqUIRoOnaohbfgX/2AES\n5b968nMJ7k2LTyzc4XwTfaM6HkC2yukt+eqWCP1c9FH94m45csY91yYJ9/86\n19vfO+lrw4NZ6g0X6eD8A6LU7ppXcsxMA+EH3DlabgnL2Zj3M2VvMFwMJaa2\nQDsk/9/Ur98hM831/35/8DtTpZjPGuMI8MDMNl7a1bDlzi/nQsdQRIZ+NBK1\nhZVYxBkGk6CR/6TWufOLlWw7NoNnRY9VTrwe7n50SuSiX0MTJOzWdar2AbjO\nn7Wt6RbsH+ORr/UCwILq1Vg2oxyQoeqO93cvErDg94uXjDrs6dH/UKBvbfL4\n0cpDbO82l9BjucnRFrGPPtbjgTIutzTFZcrfR2OgOTD15G1KF28VKCYLKgKA\nuxoKuE/JYpCOP0L+FAbd+YGixK4iDwt0Fa1017g1UwTvC4Gs1l39yns4tDxS\nm6LgGIY0EGAfdeJRvCmTNrHR1GP4eno0zN0rfOm3mIrqZ02XR4xHWQ17E9wH\ndqYF\r\n=/zBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyaOx0svkT11TKqo/LwmgVzsbbsd/uqXgXXMtWvWUFkAiEA1Uy2oNXK2w0121KFy+YdnZq7eyONXQ9h9W/9/zwOZ2I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.eca1a610.0_1587678191918_0.46098438161036204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-ripple":"0.15.0-canary.baaf529e.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aN+5wmwsDxbSJJVxOqt8fHh06qEOb5KNvo+twZxbQXCdIen2AEzTV0oI2Z94Hrz7VmfLeb3arVTzxdM3MW80XQ==","shasum":"1a47eb0755e95dff2b9b91ef26ff57561a91bc45","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpNCRA9TVsSAnZWagAAIvEP/3/eT9YoLbePM9B1O8PF\nKJq8p5x7HXMv0mRDuXBTrZjNAuhQdjRQeXLzx8pvOtdJgNKyhqkvV+1AmCsR\n9SofUg1DX3thnm3+oxTj9T6IJrnYtLm/p+gCGncCNdJYEUP6Ll8DvcBU3/yv\nb23dkxt4ZR3d7ZThCDAhy6PhHmlNd7IvP74PdHe1Ap39kVFAmXYC5ZXB3M4j\nnM+4zteUNFjKN2mNk9f6TAQIdhFHVLAWRbuKseCo3V6tXevVi1VxTIKJvUjX\nuQJIRqLNjw5MvFRUehvHxkuBm66v2cvygq13CKZq1L5DaM16v+zu+qyJbIC1\nmPy8fLIiUpOG1s7/ZcV63XNC/iTgBquhjPNkGB+OOcHUkBBek/UeWF4HbSbR\nyrxZy7+d/se12VomYalIsqfUOSJTyeo52FmxSl/28AYxL9uybRK/VFfOpOWO\nXhmF4Sxj9IWXReGPzJKF51C5G/DUL9JfNf106nWZWpKYfqfltfNKIvn7Go7j\n/nS/ETCrxhttFmC50V2BmJR0Em68OaOmGx0PbntkzuIDSFqe3z4+z0EDQoLv\nVlMPXVd9wyyqgSS/nGA7FOJBMZRKqL53V5Q0LAtpBU74dI/107JjdSgYUYlg\nfrmMc259ebTc8m3OKZxix990A4i5zldvst3cyeXbepQJeo7JupUuw5EZzXk6\nSKLx\r\n=3qHy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUQLN4ffOOaF+ptmX4l3UvwdVE+hEv6h3/rFKxLLtSAgIhALhv4Glpkje8iutRL2+kUl4ib5esEbhV6CrV+TWM/uOH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.baaf529e.0_1587681868667_0.1559118949378464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-ripple":"0.15.0-canary.7a7992a8.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8nUXGmddqI3oo9UIr6B3vFqHwjbQ1x5B4vDroU+B81cS0ez6ly06RKjaiq9OuBTvI8WL/1C4sdLensN0q++qfQ==","shasum":"68966e991e956f05f82da1629c0e5adcbe20721e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFUCRA9TVsSAnZWagAABEwP/jr5ejq0aaxU+lYXiujY\nh4iQIv9q44Gr93LEuuBTUqUSS6VUt147K4ZelBE1uaTrdz1ziJM4N1yjVy9d\nv+AGxfzMT8Fmq/zucJGw9Fd62Db/GoiMUA5lmlgg6CZvIHfvfjm7ZtEZ3eN6\nkDvMqrroqnNp5DO4pDeQqJ0zm8UYxMJj04XSRnBa92N1icYWCsfsxy2ohPfD\nIlQFsRf2YRHhsvwfJYHjjKeGoQpBAP3WX6906aIuYBX7HEmv/FZJvG1ljlaL\nVZtd2tn7NzzGqbDZxd5k6m/6nY3WgK76+HrxR2yG7FyNALafV89XJvjceTZh\npHijazcMHiGls++pPuMoemQE44Me6W+Jz2aQk79txj2NXFxtmERSc0LKX086\njkqXxwIDAsRms4rM6N0gMRdx/QitxTbUDhMM1Sh5nVB3l3H5pGN6+Um2a6cc\nltaxzc9ZcDOyV7CK1ttxAgccK40cVwmWaGy4FG/9cp6W78tF/KeJcTL1Njq6\nYUJ9XOEUkAEPfOwuf7gaHXepCW/7EcNTmcAQZe21iYJ3VdvyshKWDXmMW7+Z\nc49brsHeA/bRggCN4nBM8qqFFM6DLfQcAs83h8h7sygZ2PtTFtBDVLbPMb7d\n1tsthkadAkv60PW4Pln4bRo32C5ATcoXDEx4NatfDWCizGEwJxtB9WEXC6Gc\nt6J2\r\n=N2VT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClmrKaw32jVxvlLTlRj33iF3ELTW13NYwVWHd9w/Jt8AiBlkjKl1C3pkh9Tr6Pv/N4yliJU8Qtzmxu8ZqBNFSkN0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.7a7992a8.0_1587683668031_0.1735735388562507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-ripple":"0.15.0-canary.1150d64d.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EyZlx7jjK3zyW94hvyo5XgivuhWKVAFFOD5bp1ZWFL80MGNsJJhrl7uYkebTXe1k6/OF+UgZwjHFVxvW9chH4g==","shasum":"9ac2d174df11b2f2df94fc329df53d6adbb4f3a9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBqCRA9TVsSAnZWagAA/zgQAIfDpOf+64gdzKh9FIXP\nVnR/pvWlrdy2kWRU4aRAf5T/qMqU/6CZnh/OXeHlSMJthoL6LjWz8ZxMEF1/\nhjI9DbWIHBHFe/W24BZpreUb5+k8+al1f/1K9ICiJt3hleaw2N1fDu4DLudf\na4LAd7ICepLxgCl9GAysz3u6zqyrEaqNasTulRh+E45NhBNzN+ByedJXgYtw\nuXpDX146FhmzXnrE8xtJ0IdzXMyypwZJyHU1Z38Ykvn0Sh6qJMquUM64514C\nvpCFRimrRAW288Ew9EhYDAGjBBWX5BbdD3RTvUKASkb/tIk4ivn99s1DcHBi\nVnyg3PbJ0LsQiBohrnd4c0061J2BYxF7RB9D69BqBrHLxelyzX+aOk8QJHe2\nSAUZBIpUKvNbJos4aRQZEQvx3VJRynMkmKlX3FuAZrwmJK+DEJDHGAlBxKMV\n2+vy+iA4IMw/Qjf6zCgQRGjTzlVxFA0VwO5mXeHaPlpMVr3LbqDkTEYDpvcg\n9hPuIBUZi7TBZaWmjj0hNHtLCqsmDi91YmlD/UBZtdOp1Q1vHxqdMYnpsqmK\nnjKprDyCm7MiBTmR3TI32w0i5hP8hmirl24uP0GKkKrXi9kGhrAqLUVdWXKI\naGfHpACJNaWAZhLKI53S+O6DjPvMYAV0Ol+QmEydSiD4u1gyQ1uckDjNz9lc\n2dqR\r\n=aVX7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcKcELtrJOgOWLi60BKWpvg66+TQ59Alk8ZUqwlmyNTAiEAmQqKlh82DlGxORvI0klJf57VLrEZ5m1+uEVj2QmnBWQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.1150d64d.0_1587687530402_0.49145287953554084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-ripple":"0.15.0-canary.dad3f828.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MMfv5xKuXqzEPFF+ICMg02Vnk/6qzYPO0+JSB4K1Hf+KlDAfOO4WYA3yzqwS9rzPHkXUAsEuW2oXaxQlehbOvQ==","shasum":"f359631acbd895881f69e3040b94379dbd5a5240","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eQCRA9TVsSAnZWagAADe4P/0NRE0fwWLA+MbVKRjje\nAVep6NzGWV6DFxNIFOcY6bjyx/oUPYtbBOTSh2u8wlyGUaCV63Wli+1Q0JPM\nKQn5j09NbupstBUET/Dfpp217Gfn852fQbYEpcrewjQzr1mZCkclVjLD3bQT\nM3zKftqoHfiWmV93N7u6HVsgV34C4EoWkvNafy02X0fCOJI/Ja8PLOpvfsOF\nboU5DWc4gdjepZgjOeK2UL8gW1FNevXBx+Y41HTXccVK8gMuUSAfs6lMRbPi\nKK9od4NnHUl7fa+12BwCffpERBRNbwjmfgUEfjfOJTy69u/ie2cdfcgEBwHe\nN1VhtLBscjbVbQcp9Zf3Ulqhauw7DkLZGKWrPUFotSdV/mjmptwjeE+3z+zJ\nZIYjrwmwNxYLPjUA1fR4U4CXG0qdV30SdX8oBZ0juJs8IfJaIvqfKL90aVUE\nghQx1cqyNhh+YN+n+dUt/q+6/NFjpAJbcUx3VEKPUTCa7ouherNksw2bZXGw\nfBy05d9KM6+2qiwVNWwh7rTqwRkBNl0aUvD8jjHSK2szOKhp3Frboxt89iHU\nodH0NpTGwT7hh43xadvF0qMuT+kG02j289WHhsDFZVvI3Q+XMbi/cnYUv4fm\nLg+inweoT9ObXC1jIdBUUx6Tj6Vp0yWcnAP1lo1Gx70GDgpYaiX7HHsb6xtb\nxXN8\r\n=AoHz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4okYEbMN95SKrpwG41YPb7Eb7UEIadKoAx8eyAFMDnwIhALvKnx3PFRui+acVJ8Tiowj4LMP7CG1F5NiP0j2r1anx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.dad3f828.0_1587775375884_0.5653307569251929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-ripple":"0.15.0-canary.1bcdb47e.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/VMuSKhGsJPihkGsPwQgvR+Fv/zWesyHG2qIIEIrz6r4CRuwcYy14j9gKheVut0NbYYqc9H9pf2VZHpLfOqTWQ==","shasum":"65534761073a305fe84ce893aa301668be89b12f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MVCRA9TVsSAnZWagAAlI0P/iHITiUX42HLliMvLY3k\nhYQSC8+IxZh99kCYfZnINVGrkgOpQMKd79HOWu1nI6zLZDZVP7aXz+Y0zBYC\nvdnjidLigDWxzcj5JWXHXkjn4Ns8IRmoxNhjExiTONIclBxyazm03NaTU/Kj\nGYgwxUbXeCbhVWEp2ByBHFK2wSac3rbLgz4cl3pDh04huZDAM4CHNj/qecF1\nshtj2g80iNHZ84fRo/Aj3HD2erYPyphH48uYQcmPCNIIl2v9mLQ58BmQhJU4\n3WN6yrvw6ni9iAJEVTbEzH6pltDLk9BBNIEa7FnIgBaQEuaj4webbZMB9c7X\n+qggUx69BB5HPoqZ3G2WKwr7JUHTBGPRksQ7aWiZ4zmWWHcGQ1G98M0yNxJl\nQozujYv0j/suLX5Tk3LxzqxzEe7G5JCGOk8jdwczS6LqVzbXntu85hys13RQ\nnfhZt60M5+ufX6A+sPbcETLP2afXq9JTUU3hf2Q9yNbOf5B4OV1dqIinBK76\nTyXVFH5Kctf0kxQyBI60Qz3l7xoMg/Ke5ax5vmsNaXfgUT/CK42qfT2u1/Gt\nLvK6Wi0rHdfSi+8yl+JJuenBc0Vjzt44UZqrB8n4O4oqyc779RzWdiuKF70T\ndt/Pag6MVThZeW+i5j05S4NpNRJqXZNDVuP/KIcmtwDv9MP7qnxRVZEb03yn\nD/JC\r\n=uOHm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCumpGkZYc4JqOmnQ0xAgegsl0E3HvSOCHguftTtfOkDwIgavcAUVwKPEq0zZPjS3L43wL6fnETnbLwNehBcqJNQsE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.1bcdb47e.0_1588036372686_0.3853735428843206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-ripple":"0.15.0-canary.86ff1b9f.0","@material/switch":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-x6Q2a1aAPQbVVm09knwdA9CXs4NclFoysUZmYgihSyrYvvOepK+g7/wGBOFB+o+VpGJc9JWVAYrazQv9P8sPSg==","shasum":"03834c290b4009d8ec9d6143f0a4a0f68a415287","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5s9CRA9TVsSAnZWagAAoIwP/3blTA9C5AB9QxrNNqVQ\nNWRS1z0h3M6Zo7nSql18EfFT/7D7Kd3Ox7eIwzt/dYMTywiuSH2yjM70uo+T\nv7QqGDbc1Lb+3Tii6jBIaoDWfcRu+fU7JkrB+lG+vnOozKF4hMEq7SuMceMt\nGiXUjeVrEGMSGytcnCGApzXWOjg4QnUgH97RnxFAb08n6n0CcX4RwZQolny9\nPsA9/z2P6F7kxBlFyA/VDMFRGGzcqOE8ja7qH46m8weMeyKwPbSXxMMR5dP9\nNleazYozCNX9MQxKKJp6E+R/Vnxh6bS9EQGXmXuY86kTbpO3TNmHTpjNz6Jx\n6UEufZC++c1MMdiELJHzF8Ty7cF2ThjhuwflRvs+tHhiBD5y1YdreAZFXk08\n1vl7+6GsAOa6bjLssKRLfLRljEmT0oxK5Q33wtLA860whchamDClQNfsaF6I\nqKzJWUdn0S/PrxNXF5+OnawBfmWAcwR0gfhl8LYt/DrGSTCSJAuzNUmPbCDP\nP2/HpwTVp5C5HPGF7bSD1SQ9ama8aMfJNO8K8yhD/+g7P7jlDPmug6HcPMqJ\nU2+eQ4XjrLl1CY0lGHowExhH8UatM/VsPX3QuIKSJk1E+UXjkaQ0HviNsXu9\naBpsbph69DnHc0UwMOl/GzPYdgum0YRUFXnrm9iIPOx5j+aPGDWgeAv76tnP\nE1XU\r\n=A9Jn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjrP/AdooJ7uFhnyRYuzRDfMUf3My90a3oJ5jc5vQwlAIgNl2Zhizn7WETRw87jwk64uGaBvS4znlGzGhPvhoEOR0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.86ff1b9f.0_1588042557154_0.1080798618283787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-ripple":"0.15.0-canary.54a86b20.0","@material/switch":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4oDpVTLaGL9S/VuCa61FUne/FEcPbw3+5sc2c8WuM02WWflX5O1mUMOjuU0diCnEcctw/1n7KlAbH+8/YIcS+w==","shasum":"e615e827c7b7e10450902db088ae147af87a772f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6B2CRA9TVsSAnZWagAAQpQP/RpGxAGuNO7H9VlgLVh/\nORSmJMegkazb/6QuVTuqhimDsXIluqYsZwyxF8AW0YfqHsn1vCH96vssDchI\nIp4R1ISfSNnya7fqI048JFqSOFUZjyQPQOgXcg2Et3BpuSZ5f82BAiPRCMTz\nX0mMUo8jCuuXzw58ye/txFxPhbdXPIaWGXoJyT3py0HVGgIM2o684/LNVg4n\nQxMos4wGZ2qZByvuJ+UW08KV9TtXY0jfRbSheDEJJKwqeGfp/kESSVzIpwaG\n/E8TwfjNQ7pPGOclmQgKXvQgcC7+aS1nvtWWsV/r7VkpghyOsJpsWst3e0b5\nsevN5cxW2g8R0O2K1DUZkkY1sZPuB6QTGhoHyVUfaZ3/sJqMKmQx5ZoTMhBq\nTC7ETbQ62WWNa7eVtDPBYiuPs5kbvscx0vK8dp3WflvLYZcKuvMcYhArGdFO\nKNngN+ivKVR40BZKyYYiWGEwo0mxoE/7qyGb6UOPgLH6H/pVEn17UHPcA+Ah\nggaksmqWGwL6fswJyr4TORAozH1ADUYVoO1R/llub/no1Gv2mEawjDC4gSXx\nn8YbvJ1u5haMPUJ/86GrRtCS7t5sLv4kXOq8eLAA3wLM4T714YopNEto2dwS\nL/MefcN+AkOWEpwutI7Mj5kJnugVPb6ROsQqFfv6msNuyjgX8msnW4xN+Tcq\nIajO\r\n=j236\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDeLOLAsAHxpsaqUlylKCL5WOpMaQ3SpbBnvUi0ppJmAiBIT2clGsbGfebzlsgE9dMY7nC9N88Ca430R7+pNZFX0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.54a86b20.0_1588043893646_0.8817686880875617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-ripple":"0.15.0-canary.938fd24b.0","@material/switch":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PpzhpcTFgl9fHgNu9tQDuHV0POTEnGdOao6iLzx4M3FHajNkpwSYlQGXMr2fL9KKeW12oq8XPnuLYN7dOUvGUg==","shasum":"68f8c5768f2aab6c599bf5dcbafd72b11d7196e9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqil6CRA9TVsSAnZWagAAgYkP/2f3aCwp/4IGJrUkC2rL\nYDaNTFHymq/jbRVKrGqlmxzX3rI3AMMTGr9R2uYhNsZiwtqYTIqxfxzOZKhV\npyarnv8vGmGcCamWgTVylQLYPqW4mfsTC37KfJ7eBGLUjaDOFu3aOL2ZKKno\nytINN1/xwCclBy5GrDMTpy8uCyee7sTuT3bGylh6fvPF3yJeBsgfoOKGxf3m\nGB+kP5fn2tDrKzrrfWOoplFn2G3t9uL+gqrh85ZkgO3h+z6/Y1w4am/NMdl7\nwss9U8NeHcoTc+L7M4mk9X6Vuv/tQGehiWgeD/6YwTRJNoS5gQny7BgPnYBc\nw5RBhW9AbHqjYjM6lSP7BX7SakR325C30+Pumjetb1PTBvbMasJnFYetJOhi\nWHKIGu81Z6jB6xekbRBqqVRj/Z9kxWaul4zzRyXH8kRsCLeTc0W4aI3zweYC\nhHfq01UaYG0QOoysJkvfwvGoPCxq/F25X0/6ysWV23VtAMOKB/CH4Qz3MrkA\nhK4AvfgttVeraBEi2Gu8e3tFz1jk3ufI9lI3ns4RXb42BGnSwPHAYKGbFGe2\naEm8ofyuAK9oWD7OKF76x9ZjY4v2PKac5tErqffks/B8SDzq6MhHZ8KLQqHY\nGxkuzEoelOc3Jw5gxtOb+awlWn4uNATkSZLkEOIEQn5Q4fzQ6z6vG8RyvvYt\ngiA9\r\n=FboF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPftt+NnEg9CnToPrHsVaVynAK2nNhpARVT1D8NBCEPwIhALFVOGq5wcdRczPHgTio6+fmSKJeCyGdQFrP46iV21YO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.938fd24b.0_1588210041689_0.261464396938651"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-ripple":"0.15.0-canary.39e9a008.0","@material/switch":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YAQDFdMeYc2Ui3x1aKS5S/qVg2yPFMq5pCfvJ5lzYfClhPMVHA0rg8BrvTltnfToOqcsRIdikolmOBrvPdLTaA==","shasum":"39ac6ca3077636c13d7a5187c616ef140070c577","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRQCRA9TVsSAnZWagAAhBsP/0yAo7zs5my92gf0ttbf\nqt31EtnjaHFGAxoxK8g++N3qxTdIIoBNhkgC2wJlHpQ/vJvdbDbOEITDADjE\nX1L98GBmVvr1XrrRal5houScNB7p7IKF2Ts2s07nh19NHlXzZaqJvdoeY8WV\nKa/EcfnnLhXucU0UN293Eir4vbkXUHePcS5sjFKjFRLERlHLLBJxUgLqn0KO\nCi8C6+12IDjy6deBpncbpjOl4sHYP2rH3Pkp4/xH8Hpbf5NNALcwx1ABKeOO\n+nfx3Xdd0ImENdB/ArptQ7TY7oQK8UrwOKSsO4W8kVI71yaNZZGflvyE5lAv\n+NVjfdLBSf+vvAKnXFYyyV1EejPTuyYRO04m0Cza9DBuYVc1+wkUaTGxB5b2\nU1MafLy3gjjQIXw4DctlvxjbPISzEeJ4j39vHdSMSBoXqzZW5qrbMq15mLeX\n9TVTYBoezBZeUKK7DVutsN6nBdVlDD+/fjleJuJjpXQxRrU8s4xiqr/ucElc\nS17Qi4jdiZWasZcxL5ompnfvyQpB72SAEoDo9kz8r9bXtKYjbhxZ8bgJmFq5\nrgyckIKMwTXrej/MMybHWELtFJVUfagsE/iYdjSi/CZDpBaAZoE0aEu8TCg1\n0JnHgXSSj3OU+wlwxTsL1kaB4BQp6CqSyXl76WX0vB/Sgu565457wni0NIy3\nJfW1\r\n=QrD4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+91uZTC8njfLBr/T+YiJsmC9BZxw+pBJ8k3rn2xUFVAiEAi49JB5BET6Hw5KMSUbGVRK4ZNTWgwZKev67pnUc4/xI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.39e9a008.0_1588212816433_0.8597946545992707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-ripple":"0.15.0-canary.f3b365de.0","@material/switch":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HgGvWrHAjUELTSEy5Oxl3moATSwYkapoJbT1uxxRxHKEDm+tgpj9x5r4mwUHEztQii6lvJG2oQ6oSoB/sL7FGA==","shasum":"6e1801c55efc6448d3c3d96995acb2a0a28554df","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovzCRA9TVsSAnZWagAAtQoP/0+LlikWQmktSqdVuna1\nn6EhQWpx80xdkNH9Ggal/ZnrUomiHiIAq5CmxibaAzfzSp3VtvWbTCnaceOs\nIt0Nc5yKrOz8CCKJPmu+0eR4OZxcBn/g0hjvNwX+Nmm7ZJq5CveakkR8zULV\njXXcGVPjkL+IbKRkg1kfkREMf9Xomuy3pSNbYM6gquzDhARPb/sPygscU7N7\nkVNI9pSSq+ROOMu3YL9KIjJJ7i/0OlyOL/1TKj5OzObimotUYM4AHTVasfZs\nyD/ChJJw2IlaU4LvUA1pS84w0buiJWCzjoJPTm/yxXcAdaDUjiW9g56imai0\nhO/u0hHyKVeGnVbxzEckGMRsHaID8il7yNSFkoPYyULIZ4pYJD796tAgCZXs\nvKDLkIQO2BZsoOrH81WFxHOM+wBO1Fq1hQNq3yH/cjMV21/rWdS4s7SrbPi1\nZ22oY6WQwV84ZtgsAQhm51rp9zMlg+BNnzNCxE0EIgIe2BF4zYFkJHBSpX/y\ntOnOInoVxECAUzCDe083+yyCMNj9++9wd3KO4FTZhMlQTS8p3b99iHduTMcq\no2NLrqwPC2X64IvWA16xwLEYQ8SPahSh5TjikCU3wKM8sFBN8fEQ8QNC6U3C\n4f/dHqXAUbqcJ8s7/tBiAz8n/Tc3KAlcReYDqEUBqim6vThU2Ji3kCT+Z2IA\nLdw7\r\n=xkRe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPbEAW9OiAtAvDrfRJscUMu+GHWh7svDqdg9hBKMZUnwIgEoZGbmcXKgWA4Pbn0E/NTOlBBWNOtiAZQ1FOBllxgNU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.f3b365de.0_1588235250469_0.7592258755335173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-ripple":"0.15.0-canary.cdbdf807.0","@material/switch":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GumkxQAfcTjXE3GxqUZ/EAm9bVr6fb/tbjA6+ZQNBLfh6p2d4HmWu/ptLZxglqRlssOHmwwo8+mwjUtCxoIKYg==","shasum":"a2d3473d4deaf0ec756862a2bd74b3a68a0488ec","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oBCRA9TVsSAnZWagAA/sIQAJgP8fsxasYhhIywpGKW\npUdHxjIKmeihd8UyOFlICrC5+mEcsrtcDzzsKz6/8r7rNGGNRy7jXIGTgz+Y\nhOwl1GvRqzC+VzZuJAfc+PAH7A8z7J65BU5PMSu1X8T7MMxF//GxN5jwZ2Kp\n85w7tXl6954ho73okhW6H57nrV1cCwfpBm7w5uz0cG60AIZM/s450ZCWkfNR\nC42xu29sUtsVg+YUTqqDetoNUIHfnUNhEEtCS3k/yIjKKl/i7bre2w+mKpdO\n9aGevzRBEhHadEw3CAwW81B4OS+Otn491mpMnCNYEFVdqaAIVldLmYpZQm41\nRgFTKK1AQd+9LZmEWxV3YnyVnFLUCMuCe/RtR4TYqaNHL9tJ1SXvRyThE0qh\n+JpYdfvjPCURRg1svIXoRM9dx76oR2/Sg6l04v5ZlesLIE99hCjXX55KPhX5\n+q5zJ5wZPUhhtaxOLnkQVlGFHY7fJkVXoF0l9gv7T2GPA2/g5+xs11gQp9g0\novpvu9bNjNP226GkQrEzWTgSfutTAhUbdrZKmG7fAkF76Jpn4eakCrUp5m7M\nbKaV5EFYuc8GsqyO/pkgrd1jc3c/7UDRE5YJyltpTpYllocbpfp+WjQqO4uX\nXeZZQ8PmdUZ3A5iZtIIzhLZRQriDPfYBPDeHJks0+pOt8ekpNKcdayvQt7sh\nndkJ\r\n=Ee1A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh5Je8hgGxryoKbDNMBnkk0HFRVlFoWvjH/s4GpWmVVwIgbS3HhSzrVjvG01AMq0oZHVKzZlIabe+3o97Kfq507yE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.cdbdf807.0_1588292097531_0.7449266453542158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-ripple":"0.15.0-canary.9995ae17.0","@material/switch":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ejijunm0V/Yk/Xjuf8Gu+ia+APaQfCzcBHTIaCS2ZJa8iTjSzVcRHmwsG15E66zZgjHik6UxOPZKx6kPr4At2g==","shasum":"c1c9fc8d93d62a9f26784d471085caec994e03db","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG45CRA9TVsSAnZWagAAyn4P+gMwpByaSMArG/1f1qYf\nBCLJnKu42i8R521ld7sQIPtiC1z6vYleFu1IiTWkPmks22oqz0iOj3GfuPCo\nyE+tvDI0q6OpGMFlszQy8i9/pXeSaAk3E1uteYSW2txoVmtJWQaE6SLuFMxl\nmYRQuB3RfrhgulnHmy2EW7y1Xf0xvTixGTspcIwz9mFaQ6UigxsFJ7yg30j5\n6gNDuwvLq/bRAqDK2hln1WOxiympiEFsASk5rBihY5C0oxL4l4UtL3GqTpu+\ng/10GfLK6+cU4vQq2nhCWZTMpAHPAE+byMW4gsO7YwWD3h9sQsvn43u5eFTp\nerbBfgp+a/o+63IRggThJqs8cmGAgMN15ERMCxX6sSoe4RO4h7JovWEWMaQL\nmLc8prvpBrhYtQ7zoL0QuZaTb+FQ00aV6gwtVQVsOtY2TMA2nGwiWIZ1gpLF\nLnAfplRHxrHMjVbAPNvhjG28tyt1g45OJNGRf8JPRN1opGbk4VCA+U/TVWZC\nwkeaAATc6b0yXI/gvt2D2Fp9h7a+lcc+OvHHnY3jGwhoBwZKQTIxE8Zb0s3U\nQQxriOuCKJJsha7OMVF+OIj3C9YPqjJYoRt5sPX5wPJWm3s0Wx4y0wF28cSe\nn6p8BKbNi4aqbejlNPT/4bJ6bMOjpAK5wnUgtQMUYmopTvNgXNU84T9bQNR5\nJa23\r\n=S/k9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHR1OT12zGmRkIKvsxfShgrRNb5VQIGLP9HMy1e+ATtgIhAK+C1tC4XMTvdLyWG7fu4xYkdHevXpgXSxF8h1VhhcRJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.9995ae17.0_1588358712960_0.8998448870533287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-ripple":"0.15.0-canary.457bf035.0","@material/switch":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cRPzU8qEjS/fRRhvqj+Z+X1SbF/bbc8RkDN0q0/cGeJ7sip5BSmG2EkDOKmPKLV43ykK2teMck1p81RHEAQ6dw==","shasum":"2ad13bf44a207b3b8863b4aa2eb1339c1c15307b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":55425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIu2CRA9TVsSAnZWagAA95IP/RST0sBIWWVyTuZxf/Lc\na/BVL4ZBql0W+LDTtbtYuO4ER7EoXAcKbcmoA4s7BLG40Mc6Jtg9pPygDYDu\nKkovL7s4axxF1KQcW8ghADkeH9kNgWre0IU2stJ+wiJC5s/q6x7QkVMRr8BL\nPp2I8Mh8kxZiBpPaaUHe/pCAbXeNqXVzS92RDJmZVt603u/6WIWpRIQJfOKC\nNHiyO3E+cZw/2NCM/LfpgTVMpuE9iJ0waukqCLeT1pCkc57iF2T2Jz6xxfuE\nd2/74xvQY1lx+Sgumfhl17X4UIH0w9RFkUb2cBZUF5kDlO0l+7gXwWcWLnQ/\nkF2IqZ5Dg0KTkebKLKbQOz+kDZLrynSQ9/VS/hsSM3AeruySCvQmOrgD36Zr\nXTLy5dKObLOAMmcpLf/8T2G3XrgWhkJVgSSoShp1LnYqc+ebtnAxpa6NL9EC\nKpfsJmt6HjOKHBrM6zuS6yEx8bfvlSQhu07RCpyqY09qTdyNXootIJuHS/Li\nFXzJK1DR2JCVPdEKuq74RimGFK0t9Fko5USN8IUAJUaIPLz8/NSaXB3EldMp\nM+LEgwbagLsspD9ssYDKlykulLgD/Mbpf+Zfa4145Rxj9euVA1rNrykRuYFz\nKym0OUYvGvJvx2zwErEUdn+r7+NjKLdPZLHsPrJYKen/IQWea2Snsorex8ON\niCBe\r\n=p+1H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEb0dhp3X36tlLEtRqoRZLlLDR/Rih7GHacjuuXohbZkAiEA1tRaSIYQ1eeQHj/NHDW881NCn7xi8JD2jMQ66DvwnfA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.457bf035.0_1588366262371_0.051177822652125116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-ripple":"0.15.0-canary.2381fd02.0","@material/switch":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-o0o8NAxYzihW7aIte0FUsPJMHWi1iDbQBceiHD5CEfZ0G+upjIDwoEbewxom3Qd/App3NrG0jMhs0j/bQHnD5g==","shasum":"d392e541bf9e6aaf2024b3b25698198c35294b05","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPXCRA9TVsSAnZWagAAhF0P/2NtAVIacm8KDMi4jk1U\nRv8TkPzvjCzudOV+G8LDBWRcEuGq7gpmxb3QiY9qwUMhGG4CBsc+NqLlmban\nXb5yrTlaGRYPckVfm04yGuF9ST3UdkNGFL1OvKzIxW8eGLHDBqI3raV/eL9D\nLyrL+DW+UmCd0FqBVodNxfE8vBaaHjQGEd0sqIrmJCUFUhDdl6pvNYIeE9y2\nyJZ6nwBhe6vjoxIB3bVodI7FO+endLrkhdbJZuTXMpRtDx/ToASCtbfhOy2n\nX3l9ftOFRXqWh3sM4Gi44p8GY3vlvupgJBuEqbeODJK37C+cW31ZX7bHFEcm\nB3OyooVas3j1MjjmSfGry7SD+J+4K2o7/HttuP/xsstmDAY1u+ZxK1vwlZD2\n+N6WsCQCPQsttq+IyS+DpaIxnHwPnWXEIEEBu/rsFxCdX35TIF3pG/DL3oYX\nsgVLVGHXSkReXOiN9vbPB+8OGP5vjB0ewgnmAT0n0b7AbhBiPOtTpmB7abhV\nJyUmm1S8ZNsiA05FKqYpGDj/2j4jJ0usNX44KHElPjuo7BpPcPVGdZIUXb32\nx7pQM84PilCfECBMzM6diCDxirjN8QD41kJqbHQhC4a+g10w51FMnhi4OlZS\nrSG4fcRAbWDKCtd8u3WSD3DCzO5i8lZOJgKJo4tiEaEcoCK82Hb0CAE1iXU6\nDyx8\r\n=jGuW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQTsGIaOeSqKcpjiDHIf3E8C6aCnhf4klCmvH/YXwuigIhAIhbJRU+Yzf9XKthWhQdpTeFXuDMwS3dI0S8DIkRRgDu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.2381fd02.0_1588368343426_0.622373210476004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-ripple":"0.15.0-canary.b2ca9b57.0","@material/switch":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+6gfMvtQwLF+iWGJnvU3Hs0PydmJ7yUa8yPoBhW3xDTV4St3h7h1pTK/asSOW8GOcszpW7J6QzRk59wzTVHGlQ==","shasum":"f1b7d1e586a047713429534552ffcb13a795e5f4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZTCRA9TVsSAnZWagAABQoP/2KJDOZLZNPUHu9phoj2\np+6bziQKrC4UJvtqYFn7ZLPcazg0+OphkBvzvTBnsToIKCvmrJTuAtZViElp\n0qgc/6mU9VxbfuENWPopozDigixA1q19k3TG/yHJUIOeId2pyu/xsrjGWf0K\nLMx7/D2PshpjZTBuT3aXbWbrF2rv00lL6ynymD5qM67QWsGiceUASM02OoIT\nb6LI5H7pfuUelCDblUW/w82ARq5r5nZcr5nC8tVoE7xWkZVbeDQV7tu3lyNi\njEEVtTUof/kXTB8rcR5ejo/iqLLa39vZUFiVxYmHo1qKQLPg7NYyC6l1S1gP\nBnp1aMsl47zlyoY7/HigBVnlMKxYt4z5rsLtxFkGUPgkUMrKdwWo7mxjKJxt\n5iP/pQdaagczGYQjBt4moQujx0Ik71e5QZ1UcvaKBGaa6cOpi2sWvzx/Dljt\nIIsvIgXT1d/DG1EWsrjGT5TOi0gVBWqurpjI3ucqHlJz/x1ZMeuO+OIH0ZDa\nZ6Ngxl5ELKwK32egs8/M2ghRHRMhOTVjcfT0V062jgNm07unSWDw0JZEvYN6\n6qitS1r1bqYZlW6CEGVKd9SomxgErtmBNet2pr+yKeC29/ilP7OKqE/T8qBe\nP6tuXzNsBhnF2MWbXpxLTR8BlUoBN/TziEZxWTjLnNEsywsDbTdVnoBnyAqc\n3+4K\r\n=JosB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtDvRUt40Vn3ciXabvp2aRu4p7a67PyBglbEzb/d39QAiBYQ3+gNIe2ZaDGlb0WMbFH1yf7tv4z64kVTN9wm9G6MQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.b2ca9b57.0_1588368979004_0.8875080189899422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-ripple":"0.15.0-canary.b2b088e7.0","@material/switch":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gDi3i4r3Oh2OvDlFlzA78n9KmG3byEs02J/zF1mQjnesG7H1m2OeLpKpMY+jEpyQdHnnbT3X1oJ2mxkBkSTbBQ==","shasum":"c6ca43eb51be08f74a0e67b14ab42ce89e2ac5ea","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPQCRA9TVsSAnZWagAAUSkP/1djATVAd1e2g2G410f0\nBJ/6OjwxFeArA2a2I2MjVDpVZwb9MEBivBJlLvRwX2JfwZwInvzpFzDLyTMG\nrfz4+utai4Qkx8CmH23Ftx20hdCeWLFhSVkaei8YGzRYbXq7YqQh7x1nzkga\nUb49roUfMqlJffjhS77443GkE8/HIqDpZt/8d9T7v5E96t2yqrghoSPnMxmu\nk5a675NO+Q+4EnB4zt3/IQlfe8j9jrmKp+1eY+mYQRldoU7vVod+acN4EuDC\nZzlKlwfaFUlwEZAKsP6RIH1mlJcPW3Koa8xiDQJf2W88AZ7XK5NrmNpE7VUw\nrgo3D3le08xw9pBTwTeyE/a2TppcgheZUqcrFqXFw+ZvC8oxzSSFFf11VFVL\nmn3/++98U8R+jpuc/tG2b3lKMhDm+3RVK6hvfbvjHA+7rVEijj/q19jtKXp8\nK1YR+OEyST037Ij4pxTwUkF+w+Rxv/ok9OYi3OmMB4LUAgbhNplqdHBgp/Hb\nAqyB3FFRDJPrXflh/eF/CZ8ZKpjwUHRHvKMisPv7UTW9jW+p/t4bP9oLkoke\neNLDkBvyI9Xd6K3rXgB36YZ+5F1VDxIEcBqA0RHSTd8pak+SIBncRlUCeO6p\nms5qDKbbTn0ugFc1aPDwyA+ggnjBup/X4B8LohjrOuytWOppq2j4yipxNKg8\nvQGF\r\n=2ZxE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGLeZ6HDw8wUJZ1AGR4b7T306iJjzcYDN3lGe5wdh6CAiAIyUPKsE9aoRy8MB7ZrJiV9Oj5AespXckI+8bPjh1HZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.b2b088e7.0_1588372432292_0.01754703818018899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-ripple":"0.15.0-canary.fdd8f69e.0","@material/switch":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LCw6KKL7su3+wXcCihSKs/mO4vyS/OQXUYtMvzxySghSlSMuFn3hjrSmZFoA9n9PJMC4b4zUPGCNmDYwk4cHXA==","shasum":"de63f35e1d7dc382584738952f081b27200f3f83","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvqCRA9TVsSAnZWagAAhWcP/0ev5bQEHyzDryvKrBHB\n6xuZvxJsFJrqhiCQizl+1EL4pL8U2U41iutJaw0BAvUhzH0XtYojgNzE2iI/\naTs8z//CojI6TI9F3kQ/JS0sHIRATepjmR9AvYi+5R8qU55/9rWoEjdlNTEP\nU40SZV4cmfKLNAnSmGb15kgEcYzPwtP+t6z/E4FRPBDdZKgwmE1dNZK78i9U\nHOCvX7+adNQTOUMIobA69HzCqToSFxdxffSx0J3uDFKLOG4VE45BdKI8+Io2\nPnETUJcRrdXtN2i5J/Rxw6FZbyRuCkbl+Ax4Ci9pvTJNn93v3bJsqM27B6aI\n42ojNgcBOQX8hobRv/3x581D2IulFKJ0lQcRHft4Ht6R2Y1LjLc33j+m/eIa\nQxcgheBMnAb3C8hXT7yFh08Jx4kBe18+EedZv35jTCS737Z1YJqI+5FwB//Q\nWWvIC854xKzYTpg4WiLSyw0OAatz3WC/6+fo6E4Wpo5eINKSTdGRJGw6/4SY\nKYEhDLZ6zv9LwOrO2qvpIsj1lyHIfxD3wqjggMUCV3JygxClZHb7VPBNoBGx\nIGb/K5w6j2nZGna9ZWR0ejy7PLOhTGCGU/tG+bzRtihBOm9SaKleHyR6JNQY\nYFOI2XdJaFrr4xbECoPmrQY29KkOMIzTed+RFaWqNw7NngDBbMq456RyxGL0\nY7qm\r\n=ArAq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjTS2e0btO2PyrhezNFOKu8dHdiltshSdp/Y2cu5t0JAIhANO/AM/9gNFmVvY7CT00VWaP0STB8Qd2Fr8J+/g0L2bM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.fdd8f69e.0_1588378602381_0.1143435690610708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-ripple":"0.15.0-canary.730f45a8.0","@material/switch":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9jffVLd7Ou37yaeWiqVb/8K7uRDeD/99Cw0iE3Y67L0nTrntZ/+kxi7enHPZjJmY0mIiYkd3+x152eh8QRcvHA==","shasum":"55ff5ea9fc641cc63269a9bea0704e0e41bf670f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1RCRA9TVsSAnZWagAAE0gQAJrJjY8IWVhkcnPpoOGp\nsP9wwuGtZOgCn7dWKwzheq6M6xdU6+424qGuNc6REXaQ1AuMpbZ4X6UhWKp/\nS2xffFJRHUKd1AJkxAbkrnIIYAgtJsh2Mk33NRTRKIYHtfOE+BgkGazVtK27\nfHfEUyE9Erd4MPmrWN2L9HghLe6pDKiNUjZSbwJK0e79XioBoZskXDeCKo/w\noZMa2yu5iaIyRKf9CZNYT1cbUbST1NktJs7FxkPWBlQjgy+dYgyWInmY8Kbx\n/9VPw7c7oNmYtcIt5Gd1dR7Wn9m/jE3zHlzn1WkgMH+lxMepTgVW9dobroUp\nBp3uENyPUVdEQCI3a/uX4MMvPEvAS0GNtAxTwkI4gT/CZClEK33P9+uwKzoF\nFEuAZbVBAVq81sxnRD00Icf70ezvLeSJM1lU8owzHXlbHcCzkVxovtmptShx\nhw1mH1owDqo0caevjac7Ta4z17y70pH2GVV6fRfzxz+O2VSHJS7DNmUTf36E\nPnsC6t6y2PVWrMt/UZ8mAM2JuCuLKFC5zS9i/lpezywVzA0CFWcHf7Ehn8Ic\ny5x9Gzv+v7d1Dk5IgMuB8sBpgRIchLguTdiswFoPwtM80I4AyaXQ3m/zWt3G\n1Sd+xgbStU7hRc18hEMYZsqw2dUnWvgxxQddrgBTGNnuwM+U0RXW71stGt/1\n45pm\r\n=afra\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgj9MeHdNjtGUJWs8C4E7d6iV9/E230hXIfObU7fCdIAiEA+CXErc8RRl/ohR1NO0UxeDmcUtDU5TX/2vp6Kdzeln8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.730f45a8.0_1588538704675_0.9278015781728179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-ripple":"0.15.0-canary.4219bd20.0","@material/switch":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kbHpD/jX61Zc72kR+HOT3DjSfvJftGtfKilu9/Zccuus7mK4Utylm4RZXF0UxpkYTsTzYm9OnESQi19Spbns0g==","shasum":"f13b86c73f938476ea1f3178b475dfccee7faa29","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYDCRA9TVsSAnZWagAAGkwP/A87w42d5umWvHwQ/Ff6\nkv+O0eGaruBfzIZ7mP/Jw0UMUxSLGa6KdQKmUdHOo3kptjb4cP2Bb6P5QmsZ\neXKAw+1fgM1EPpQBBSZimCZC9YfZIFDm4PYwTXAHlJlfpE+vf+PUumO7Kluc\nK28SfiRzWiOBQ1jtUuSnm4ZnzuFbsgdXjlpLYcCkdzJVIaJIeI87/lARts5d\n/6RdPGHdoEsR9L0zMW4fSpH4oxwNjyPVjjVwevFLtAdeHr1wHxZl6QkjKQ5f\nd1/zNxUD8j0w0CYpebsWYfgbyN/Xz2igy5CdyGGjnOldl3lSWowReHJhyhzD\n+YhWxL6fZi9AeSIyjwn3GXH9emN7xhioy+gOOcJ2W4KJBUjn8IK24sKEdoxM\nP4UQvBUiuiTU6PDvIzhvf3CmlLUnr8d/F4pYt0V+kkKYvrL28tfKaajZ3HQY\nQmVsg9iaVjeeDWrm73sOHI4kVq2FD/Pm6/c4xLbIhh3f/hvXNnWIzTb6rt+5\nXfbjrE4oACX3KE4VtD0LBTusjfJerZC15MSXC+QoyV/PWaVMoYgVCPl8t0oG\n4nji+EtVAiJ/ry4P8oiyzc3jDrn/h+PHE0WHKeWBQFpdfUI0ZV6uAgUY5m9T\nkHtjXIzxQ5xeztOEZxhayuTN6OewyW3u3zMZJt6O2btRADO6SoY+s3WsEYe/\nxryl\r\n=sSuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvbGU4dF8prXBh/SXocSv53iLFVj6YlgIR3XkgdwsFzAiEAnHuJ8YqlEBA2BAdI9C6ccZjnN94V5Rl1xiXeoEUyAzQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.4219bd20.0_1588635135985_0.27656796643200465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-ripple":"0.15.0-canary.1d83cf6d.0","@material/switch":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kh1FraSoWbCVBHivP2OvH0oKW7CyLy9c/MlXkbPSa1cCx6BX2iWcrY8Jh6q3tehXcBHGIDnKVH4b45g+iOWT/g==","shasum":"5adb8834dfaf600790d9ff35bcc0c895928da66f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ51CRA9TVsSAnZWagAAdrAP/394Ytr+d5zQXygwmFm5\n5Z0FN4qEWvuVT2qcSBxnlB8iQ4XZQYuq9ZlwoFIlSPbrvLuHFwFsbmsLcNba\nyFo+Bm49IHMts04obcZWLXNzaNP3Zo200BIb7I/Sa/hFPbLxrwEOtu11WZoM\ncnb9Rc4ElgbdXMkRD7SHkgpvskHXZW4XZTzrjI5xibuKjv50aarofyWFkdyB\nVstPN1pRweJtDYnCXM/knVEQ1GLyapf9wKB7TZ/AVzJeVTMoPZ65/oQmuUDg\n0z7se9Zn5H1HAAuKsC0lgpVGvWOp3EBa7heTbOhQzd/Jcu5+vViuY6hhy9ze\n2WAKiIxsCnvX1UKDKe6qIalkfaR21aSZwHb5C5cYqPRrunkc8T/fFl+lAFmb\n5x9Xx/e4huE9gfxUYyaJVkUgIyPaYncQ4s+4D6G56SXPTpMeL51LPFDUqH4L\nPqrCNxNLQE7nLWfiLmhOcX/Qu4NlZW+MSSC/I5oRN8RnbCYAJOpiQvbKy+CR\nQJX1wClf5MIQ6QMr5qpmI6z0afo7AzR18n0q+hy9dSXRCq7zkj/Djw/Ju73+\n37tAmXVM1whXYIvy2xev2sjGG5XibRdSr+BdlUpjLio6gyjCKiO96b270vTd\nrU0BBXqla5RJIKRyDCPGKHt8kB0UqbiA4hENJvMgECoPRQDuRCCFvLWf2PaZ\n7yWr\r\n=B3n7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1VX+S0/v/PCMr4GZFUE/rqkm3PmY8G9dFbObWGPdJ6AiEA3yEyVnffL64m7Hl12vXrqMMMb+gOevnLdvJLsoTg4rk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.1d83cf6d.0_1588698741072_0.9536610931433336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-switch","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-ripple":"0.15.0-canary.3bfc63aa.0","@material/switch":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-augCyCgaXeHX9hMGPb+9zx9GBwdVnzgx1LFIsV60deRx1kADf9gUtRhvc5YwDZ94guJd7KFR9aw6vnrsrPxPzg==","shasum":"550e293a84a10af04f826bb4e02c913cdf55fae8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazmCRA9TVsSAnZWagAAMPgP/08GCT+Pg0rXgSp7zTzV\ngZ2EHtUU+TJ82E9seqjGDj/YeDqV1OWhPGKdZwnxC4Dp1z2EpMTuL5KRHaDR\nn3DPSZ4GGE9gVgHTttbtCL+FRP4S4MJiKr+GxfgBnEh39NRcbvzR5m0fJQT9\nzgYMhGPNe9u0oCsZMwCsKxRoRxtPUYC1SjXep/w0Zai23OCu9JjiiDjQ3shr\n680U5ZT/6f+HpEOReRezRMDoiueDOVld/iEJ+86hl9KcPG+rP4f7Ro7GzbZM\nbykavU0/9EhDIOdZKD9ZPJnUTOoBynbSWPurY65FjdlIfyADMyKxtKwq6qNL\ndmyX8HvWjgLcBuMwnU5j66nqg5Zbp4hHJcraUl1BE5qTnYb+LEjGeozx0/sa\n/A9joR27a2HYAuogjsCkJ7fQWcby6fXBK7ArfwAx6aJyPdD1AAHR8i5aSHAU\n1cXpwSv1g+MJDgdwcs4ONoWorSS7+d67URLZYqtPDz8toNol0RkcOehhC2Mp\n/Id3QVqWxzjzDTIzC0V9A1RwUy2JEh86smt6ElUX5rvUmfePyXzZvCFmjNaI\nUVxfgiKmjT9HGb/BqqnBcod3x7Nt3J0/SFQuQe6nNbp5sR4Mw0obyXN8PSmE\nTg12keule3S3qc7MtgKxDc9+uB5zdMgyaSHb4coZpcGyLR8LYme2FNLLpntF\neFb+\r\n=Lmse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLV3fgtmD3/h2wsEFQQSTnFv8AWHxSQopnOzp/JoOb7AiB5buSUm0N4XEtAQauWBMq2OYh7XT3puY6Ww1IoSpa+Mw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0-canary.3bfc63aa.0_1588702438113_0.09891602297050572"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-switch","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.15.0","@material/mwc-ripple":"^0.15.0","@material/switch":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-z4bOJgm9PYACk6JtFCQWMHpfO3HQOALmnV4EUDrUL4628oGcIfa3VJPeINDAoNzjwIvjY5EtoGKWEBDJpFnrfw==","shasum":"f9f24e57d53df92bd2fd4a65ebde89a8ea4aa177","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.15.0.tgz","fileCount":16,"unpackedSize":55309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepdCRA9TVsSAnZWagAAjiIP/R1buUkB2JwE31FSk1Xx\nZ3rkAYvMMm4VCqdVYNBv2tqYoouBDig/s7QR5LOVrS+6EYtrFaPx3AK3crMP\n5b6cb2An6oUb3jSHjb5Jc3uehf6oJBdvKph4RSqwAbUnhJbCFUj4BYmiRPCl\n2aoOpVo6NsTnVAa23wjydFcqNBqOAh+ICLWF6j9gg0acRvCfN5Mx0kQP0dSv\nAyD5EX+7GN2wlIN9i1oIw1Ibdo9d2yVgmvIq+Pi8Xz6bfL30Ct4AgDxta/IH\nL2VfbhoYloXp3BzJPzdp7zvIrOb3W8IZ/MSJRL5r4XH8ZRu8wiMJIxKdJrAK\nASRNrrVchRpsBPUppB3W1G8fGe0EOmPjRZpic3IkYWNk8eZwxP4cgMYCxHu4\nqKPKCdyGPrfNZg8W9PD5oN1Ope4+sptQA6WWkrp9tfQYmnBTRaA8l7gi8ZMt\n2KorpvYVMY5LnTiRaIKcIuVjW+pwqnq1X6opxnLCPy52VBMcS1CgD3b9LfXb\npZq8O0WHFC/VNolPYgD0cGRvU48j0B78O84VNoLZl41Y0JEj4B6QH3ddnh1x\nRNmwnjTOSDd5L3P7isJe3HKmOrMMsivXxcKLHbRSDA28Dk19lN+CwPsadPFF\n9ivTXCXQtKRdQxfjxTavwrl8vNe6JhP8ralrs9Q/tXQInWgRJbyK1+vaoXdA\nABt6\r\n=h+y3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/nvNwmxNHXNcfm2qSCWHV9vrRdgrAVB0rowNNqBiVfwIhAObJUxpixki/7rAAJZRNbuhOCI47jZT/vzwA3IwWDvPA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.15.0_1588718173317_0.5925876972901556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-ripple":"0.16.0-canary.1f4e3d1c.0","@material/switch":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JmVbDnuenM1QCAX16h/VtwTc8Q5tCdfoiCEk/wQfVpx2vaxa2Z0R9WZuK2X3YFEGcPUClNrwo1PGUEckVCe6Pw==","shasum":"49c316270a93d50f8a34686c8da0da69ee0b161d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszR4CRA9TVsSAnZWagAAG1YP+QEp0Ow61YXHM+Iq3mO8\nTyFDmguNVBZO6YCPHDvBL60GMxtWqCfowd5Eh7nu3J1vkIxRB9qMeZyYstl7\nacryHyVmbfcMDdWWiDVSuAWybTEVQubwLu35UxUVnXgPkZIuKfLPt2kB9Q6P\nsJu9diGed/gvAJufwGk/AA0p+0mdaW/dq3+eNtqzAwKuaj/df3+X6SM6WiK2\nMwNt5upWqhMU9+xzb1rEaUB5gnWnzSq8Sr2FS/e3FZwCMnfjDL+S6IWW+UTG\nhWQvb8NsJKMoCsYZi9kxMyd6tVw/SCGMneVChbfYWLO3mio0x1WAlbybHKre\ndGjalospVxUkaN9WL+xU+ZittUoR0irTZ+XXbnVTgX6Q06CbsjXF3WfZNLJf\nBw8GgzQUTj1ZmTPQF1EMQg/nlp5gSkCj37vCLmnwo5xTGYTXMjezBEUVnUEj\nuBLNraxWXnCyG+zY6HmfUzLC+76VbYFkVEmn/Xab9MR34YfwQt0gv/CWav3p\n7T9ZMxdAOHI6RqGpt+Tc0sBUckOy4dgN4a2R4ROgRfmUe8snCPm3k9JJxyD2\nRI44ZojDjx9ncKZlUcp9EQ573JJJZB2L6LgkXKagYDKDJNR444iBpIOhsrsn\nW65JUlamkB8aLi2fROXC29l//qoTW46h4TasYEcT9dQH5IW7H4HWG71FvMtu\nZ+Yv\r\n=KCOf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4PDJ8U0/rs1YDeykpRuJqNoWpgigrTmt2e4TIx5peOwIhAIK0kNUe33UpIr1fRZkfcpwkXIV86X0pKjP0hy0mfHWb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.1f4e3d1c.0_1588802679815_0.09586356585014744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-ripple":"0.16.0-canary.bc8759d5.0","@material/switch":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-W0oV5nN985v6uoSGdMnVMg0JKV+eK1ytaqEmQ7R1HtLnMiJ2xH41JpiLp0Z7w9nzoLBp3G0Yg8oMqwRLVnnurg==","shasum":"5049d7eaa0732f568e81d364cf6a9e6c2185a75d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":55361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZvCRA9TVsSAnZWagAA0dcQAIbLrLSzKoWEEEEXXcRR\nfkuGnWT2dvswAmlW8rv9tJL4cR4mTvtzzamsL6gKz28xV7TeP+R1WSL0v5VY\nVc8ICtQlhTHihbFdDqvK7q9IpYfN76ElUeVe8qE5oc0gkM8SiGFSqrqTk6Ej\nbuElbQB6862i15Q9ZvZaDo9BBjYStHjhb2cX83UByqk7Y9sY/ZuZWOYsL8bE\nMZGY0Gbnxe51/y8GZ6XWvtCjZhHorW6C3Qiw3wXQtFtR593muh/iJyboP/DW\nxS3vYu11KyPHhDAkOsQnEI0ESoy9gjF38+p10argDlL0DWtquo2kl8euqQIN\nEp/PuZDxhWWw7q7sIpvw5zMOiYSCWxt5omcajGERbX/8xcTT6nMELjzCLstJ\nrC35+R8NgkLaHvKtP+N2NcS1VI2/l4TPOwGjnMAaCQNQSfummXxR6G6YdQX3\nX0fHxj3Pbu2w3o1cgaW5cXvcko6BoS3vHbFTBhV//6ZqEYgTFZpiXqjVCqF2\nYDdtWHOyE/MyhnHq1mcYMAUnyw9P81H/cv0HM60tsJD+M3lEP3Er84fpopeQ\nRstoiZO7ZxE22pcf3A3rNf118vv4Y86yYtbKP/zYwyjSPMi3FIUy4ERjAe+m\nROMPZvNeWn75SVQ2oscJXOPK8iPtmrb/mB9WeDo6TC/jHXmDn4PLuOcipemF\nAqCG\r\n=vEDL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWiwGuVGMcPk/ZeNZrtMDsB+JQoFjUdnnBlkJNXFwKSAiBqucyHYHjJolKccRIg3+3DNSlpB99hoL4DwqVva6j6Rg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.bc8759d5.0_1588893295166_0.3302719404682164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-ripple":"0.16.0-canary.d1379acf.0","@material/switch":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DrDL7LycAZ3jcpmJo2mSc3TSBzKReI8K6Hj2ATES7cTa2yjPIkWkFZ82L2H8Z+vAUIRqXyHh4pyFa7w+f4iczg==","shasum":"a706edcfb0f8ca1fb5fb902fa29d39a926a7740e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnFCRA9TVsSAnZWagAAUGkP/iHDyKEPYKo6M1yFx135\nY/Quov20llPESU3VWdREFjVOwkXhgRknO1I2oSAvcvEDqWXmo/K+4qEruKmw\nuEVhyUdng/Bk5EsGQG3jK4rcQAbibC7r9rJPN5eGmva3n5D16rJIXmM9kF1a\n8KAMagiQkLhpXg2LrVB4GfgSS0huct1VgUy6Lv1Mu9Hlq1YZqpXnxeOyHpt8\nzSdQ3bxUiFLz4bvhqd7xT1uQWLKXccHkUYbldbWERxf2gs8G+tgfGVKtaoCw\nEA9Kg7VE2hdOtrzuyQIFqoqPvnItEFBmA3dsCy+0Tx/3D8vCg6+2d+pUmpjc\nx1ldKtJvgLnpCiOtjZHa67TcXa6YbUrOGJUFtiRH6JuZVyeG1d6arSMLwbt1\nX7CB6MmSTKvLSYK4Fk8DrdP6WGO7DEiKRajicxWDGqfgeI7BXv+SC4qm67pY\nUWPVZrMhu8/zB99kpl7JbtFgTvbOiw0txft1oKy9SGbBqD5iuA9pRhDoPiDA\nz4OwxOERm7sHHi136b7n7O2xOOvLUcCpMHATMZOFKaRxU6JQfkoMjqelujUw\n+yzMavZb7nzi0+4jaPx1O/jir29hvRM5l0dQxAse13TWbp8gdy0CvMMqnuBl\nETETnCJcBfRpaUxYwbcu5mRDcbef/9yJ5sVOdQEdHbmMzyan5827hkTxIsew\nkmRv\r\n=33ww\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErQRjL8/UJoaLZXwFGtZdXaVUBPuB9sQT9A3l6Oe1TAAiA666oeIzC9pra/L9F4wrlqJsjcY8rMtwdoQpGKcXRY8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.d1379acf.0_1588959684744_0.5877198347291817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-ripple":"0.16.0-canary.58d51fc0.0","@material/switch":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZXHcodJLCbvqMjGScwOuyd7q/kvbY9wou3z6i4r2PvGpPklpvzX/cOp25UKZXMvuz8xN5KfLZeWBxpxUIoNhpA==","shasum":"e689cb974176c2bb2ef32d8dc2ab6308ddc8c387","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBWCRA9TVsSAnZWagAAA4UP/0t4DWU+p17kgTMS9oke\n/CwyMRRI0TRyMDq9AXbwTveoVL0THEGNKjP7GIScTzJxW+2F87bgRyun/KDh\nOi76jdqUgfJA/f7IGJFk7+9ch4o6WDC5mLKzm4mNoVazGPDbhsEKxG9rih9M\niNEfvXkUehuRW62ue9JHn2RFnaEbzOijw/Wi11UetFltB8fyo016PCIulVHj\nh9wHXcz8jSuAOO3xxYeJreENq7prhDBjyPd0C0ijh963hYKYJi17pChW0ae+\n+sxWxphctPo9ne1szXUca4JTczJrWgydUra4LkQV+X3pU2yTlK5UjnN5dFK9\n1yWeipz6HmyvYHTWvbWkAbvxBqAq5q1UPcvk61SN5Gr8jq9jFRsNjzC7p/Nj\n2A41lKnSeA2tPbTwM/lbGZM7nuldqE7Kq+Azs/oei+pnW2xp/Eb3Q+lxljgw\n7eIcDUTYs5ru8OtQ4bEsKGMPWltLavMXCvG8NKW/F1zC6U7HboyzowMrmq6S\nqnyrLkK0d80QdTXwYxI1F1R28I5x9x99qHxaw/PTa19ouPz5esngD8b69/Io\nOjaraWSbP5xkuG/ix/jj+KRh4/nFpeHr1R+DZ7cVK15VWp5cY4l2tr+8rNvc\nuJz4xrVHSJzifIFWMOkZfAXepbKoRuvTc959sIC9nAkakm2cY5sW0U6zG0yi\njisc\r\n=7c/m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM6cksqJRIC0Hj5kCwGqI/mJfq6TV0q3kQgdQRkAZrbwIgVMD8txR70i+ci/U5cJbT0wxmosWjaxoeA2xiIbyk9l8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.58d51fc0.0_1588965461707_0.8726293464505701"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-ripple":"0.16.0-canary.588062d7.0","@material/switch":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HgSh+FAHN3eBDCHtxlf5pIcT++JmcqkF+JXxgzaklZTvH964Ct44wclwlNC+wTFNKIN4bmVITtQIWlbJLyP25w==","shasum":"c9eb5b297aa853c602b6e9b00723453bd5d18bcb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3vCRA9TVsSAnZWagAA8GcP+QDxyoyRbZS+o6B3PKcK\n8bW9zRh0tp3mS6VaZlgoKD5r3j7rgfFHM9vrW23CIGTF9SRsjUsT55Fwsuv0\nRGum8N523i1RU5ABAoNJhS8QJs/lNdqUqGWoTTZ/2/EYCnxUDscnO7natk2Q\nU6QxhKjIFiv/CjQrXzvP5IUENCvHMtKTs2jBdHLfR+jcPlplTVe0zGuY8yqW\nP82uJy6j0H75/rCb3+jxx6Hzgdz2Tzn1qBHDOdSTjctoqSpMTl6+aO5Jxy9o\n4Br8zU5ZssT1Y4fPMQRAyRRz1NBjhhL1qLHvjNVUOpM0hBBASwjgixq8SqvE\nHKXMUeIXqEKhPEVBhLb6Gv8wahi+l0NgAWLHdTJ4plJmtH3ZimE/uGE2VBoF\n69axqt9fbHK5I8Uzq/NC7scgNVgY4Mu0dFfy15FsProout20RzI9Ko8Wr3uC\nRzg/eColdYcPiokSg+gFdF+5QlqG7ij+hBiP2xWrsBwhU0jOu6d1FredPJ2G\nIn+MIxmTXTu4EvA6S3cMpMMkBQSiOjMgkuKCcu8IMpXsmzmUeFLAs4Dbi4En\nIm+DPCMB0brcsu1QaxDn2b+Cgs9NxrCp6T9KVaEAUkb2Qlva87o3CDYBym2m\n6pfhq24ojAcjqnxrtfWWsRR7UYdboEUW2KcslGKY3mHH9hyiuodAMiJmCOKL\npnYs\r\n=BKEy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmnKlWqDrBepWN7rNudzu5/yiyQDIR6UmDkPZN6YKEKQIgSBMwDJRUOPOxnFJ1nVs+106v+1946ElLf89aghMoMT8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.588062d7.0_1588973038677_0.17828302415997843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-ripple":"0.16.0-canary.fa21f639.0","@material/switch":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uIK8Z5Je90RrFGUHDP+6JhjMX0apTkqS2ay6RWW2pfucNnB11H1ZpwJ7GqB+yFzdvXAIkmve59mqbphuy0Z+Yw==","shasum":"d5639b0b0a043b27678ad609f87ced7122eb8c3f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYumCRA9TVsSAnZWagAALrAP/050HhLYJIOUX9Hdn3sX\nsduPK9yGzdsMEz1EQ8BSnjSj4ndHR4Q/SkoQGIMdi2KuI9vxK+fLUuC1E762\nEExugjcOmePHBuQVa39jDhbTn8zX/qxlTKjuvWizHhcmvu06KsQ6UCQkguHB\nVAEaH3XT0zMVRxTTFZMx0uBtsRwM+9qx3p9lFDmZgC10H1JRO8bRbXe0ZNNh\n3ZKJiPXLWn61ltEv7yjRbfxuX7v2zq0qrMwHsjO3Rdbr7NmAac8FRYdNlJQ8\nGgtjUqryDTx5jdS8ZuxOFrmwlArE2wHNJ6YQ9WrRbX+njcfuxiUvwrX0StJO\n4zl8kEbg3aJgiXT0SKleXOgogc13aSir3XJ9RhRi050ZkiRsd9gHgnP38Fo4\nUcYMM1KwaEu0Dc8w7w5A4qx98Qv0/AWx1WvbbOG19y0rNdAOljs+2G2E4PhB\noTc1OoGTS/bz7GYXwdxE/UgW6Qu43wztpFwBj56R/wnDbW/wVJGftkwfd4So\nPR65E4OCUsmS6C59OtFrGzEHY5yIjTZy2cfic1j4+bi3w9DSUMNh6c8kM6Wg\n3MlTVTZ4KR+2q7/E7Ad807VucKMzVETZPo1x25kk4PbYlK2+xDjpXdXdAkHH\n04JxbQTuEtluK1USvyJ+LTyjiV9QSpa5paIYhePourGwYZ+9HoVAKzUM+peJ\nAKgL\r\n=9ufF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAgh0c+01qvF1VmPVxwwsV22SJsYgcZh4qEvY8yjmN3FAiAsCQIy5PYv+3vC2ReCVHCvUkfVSQLAsT/VpELiWKEXpA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.fa21f639.0_1589218214371_0.12660297275403787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-ripple":"0.16.0-canary.2772c509.0","@material/switch":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sIl2/9rRUuCXAYZ2LzdfR5Lrk2PfoASnTyiDxdllL7VBSqC+UEuYSZjJxn8I9sNrjZd+QnCDQmvB/vHmjWzqOw==","shasum":"2c4127fe3a0d19550eaf0034461cf5c70a8fe974","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtDCRA9TVsSAnZWagAAO2UP/0t0U2oar4p5AWAJC2xV\n7JKmHPR56HA4VXGTIWicfeyNYnsFdqVtKqaWKV6vb30t3041BWJBKasDyIcY\nBuEjqbnxi02119i2O14pKz1kmhznGDp5j199GmTfTwaHoP6NiMNlYzVFjm9D\nZ/sZ0K9yTXGKy18oXZn5rT0/JfoNlJJm4W3n/zFvXdIi0oSFdACojmQKnF3i\nqnE1XOzJ6AMHAhKDDMz5zOW8z/fqF9ZndWrP/wberD3u9XF7f2d9G7JAKrhD\nUTu0INpuIQIirpkxDXN/RqMU6DT9AIG5e/2s76fmINcTlJOBCfSxoT3ZlcPL\nGjWgN4bEy4uOi377+udvUB+FX4IgUxeTS+5irHq/tNTuR2n3kqlCbg28Q/o5\nNVLCefDDc9PUhghlTgtPlyV8pfKiJ1HPQjYk+3QoOIqRttkoWf2j2M1HOOHl\nF48JyLu07nxF3D8VrPxMky/qPG+TQq9FUzwouAcOvVR82JPyrEGhhYQ1D9/p\nQNt6s50zLy2so7fkxNjtbIUUFNybyDHvVVCrC1BrRfrUYe4x9MRV4w3JUBcX\nRMewIK6smBzAmI3jdSuOZam4Vs+VRuHplILx9bCbT5v6jdwc9RKaweRe7YYE\nvgcwcv/uUxR6aY4utfec/FJscCLSR4skLkT0q0xqO4hoWqdrvZe60XAeVcEN\nlxOo\r\n=VuWg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTIAkcTFfWOQHB6LPNG9m5zEUOPhQglpbHjebpu0p7EQIgMAORgph0Yy4gMmYaesp6XlXw+qJH3fD5RIRULKKrh0E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.2772c509.0_1589222211359_0.2962102375197626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-ripple":"0.16.0-canary.fc4796d5.0","@material/switch":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dkkD/uYZv5AWyakmh0b5QmsMD3PKiJyU3iRdv+EKQT1cm2rJ3ZCSz1O0FD9G4JCYopIqJ8jcQGH7aAbQRSHThA==","shasum":"24945f7e14ff9c427b9206890777c5b9774e98ce","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubAKCRA9TVsSAnZWagAAZ28QAI7VmTunH54AXjVF2cal\nTc7DHMpk7ftAmue8Z6PyNVu2ZyZ+X2ExDtJKQt75klF+YMNhAUjvrGl7uEP6\ns1672YeQycbCoX+JO+t5sRSXg7NnHL6ZebDp0nohk0kkZ3szsFxLnWk9bX8l\n0Tt8BhDjt/dugTkM+4Kq3v9Hr+AbGiPi1prsu6hm672kqTP6jQRtoSc8kdsW\nP1S55NiSwGIJyfwi2pRGpgph4u71Ko6Ee7I6dmlOTOM7HRB8LTDbbQx5qvO7\nNaKvTnLkGOnsvakth1mXnta61HMJAjHfq1EUiQnMjr05OqqC2PYjGhlSgPnp\n0ykHmF8BWpVziMjr0n+AFV1lAZVKArt5xt1L9qaRguQri3YSNwtpsTAjgJsl\nV91ClEadQK4qR25wZHTG9R2fejTQ+e2RJ6z+BvVZ8urvRrjj8DVWj0zelxtU\nOVpKQnNs56Q92PXm9yfXKPFEWkITRYykduIT6ZBTurPENE9LHqXlbSR0/pTu\nXQK2Ik+7QqUW0d5IxF9BX/Q926OY6XP9sYChjTzlRYbTVvQqV6GUHtcjjJ8H\nBek/nQIsYbY12p/0+33PXki+ZY7fx6Jg44gudCJ17rrh8deN56cNgPOSAztE\nlKyn61WOe/4ASvaY/HgaWv1SJAb3RCBY7JOdYB6oMBDtm5nY2AK8A03dG11C\nk/KD\r\n=9U00\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHhTg6A4so/YJXj21bcwd55NDr0f9bUbEylkWkuzDOFQIgbG+au7jykQXtNLpYHj+gCl/FMZUXBse/3E+m4yZGw24="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.fc4796d5.0_1589227530462_0.3575974161827107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-ripple":"0.16.0-canary.0d1c5f2c.0","@material/switch":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ufBDBiZrtpogQNLiCWHPVD5c1lhFX+tF9g0/dB4Z29YhkT4/oV2ARKq6cb/Mxi4smgBG4GJUFCuINP9Gx0+FLg==","shasum":"d9d53e0a40382c1909306ec69e4e9cf3a155d011","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucGACRA9TVsSAnZWagAAeW0P/R2+1aSt8vNmhDVmVOrZ\nMq5tVVZkFthZNNpzJuZNx3oNo/XQB41cElqduLTd0sDfQlezY4hSuvIo6qIc\npRqPL4VQN9sJS/wYPkOlwXOClCqvcJkoN5jOcQy4kAknwUSJR/8DcyqEnRq4\nY/xI/6AhTqbiTX2o61u8eaZzjsGeD44x8iPVCAEuWqrZq6RICFcMFiakg6zR\nblYe8asaG4jIdOqFrSAfZIdaGBp+9bu4e+NgENNVHQ/19wLVoDb7BZ3o1ncZ\nA0TYeY6TXVUgVtTWjWZiXkLWaiW29ERGuN5ChhY03NBtLz1f3dD3yajzeaCb\nVqaDmNRLqytbNWfy51ekw91cDvXRcGlsdpKYjkwuzBwp2BsM1mOI/cHdMrXD\nV5C9Wt9EhPrzP+f24scee8sFHIcMe7ZYJd9UVAUeCIhBRI2Wfp8xs+opg6U8\nAZjze8nLukkxKUoKWggPScN139OpDWyo/w5Q69HgMts/jCZFfiJII+fneE9g\nQEF0UslqJJU/E6cF1Ms3nYR6ZrcO/+6Fi5CZTkaQSBAiOSYZJ0I8pf1d/Tnx\nc5UYcDFNa0tLkSC4mKohlVX5DFUaAfTGt4fwERp3KGCx+zAkI/fe+D5RN/r4\nkBKQkmr/0GM/BswttPWw/MbuncKIZWb0vF1sXoU+J2W+KzYbBFJjWC54d+Tu\neA4/\r\n=+MCd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg2SrYyLeEyvoDUWFJIhZIPVuno7PU8PtdoaMy/Fiy1gIhAOLhK2QfJ0+01EWVJmhN+hlEQrgJnW2uLuOOVUILHCAq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.0d1c5f2c.0_1589231999835_0.2936360023077389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-ripple":"0.16.0-canary.d083d93a.0","@material/switch":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IlTj5ewue6uVnQe9fwnDPsctNRlmxdEdxfCKJ0Qo8y5pju3lzS/air/lzgfL9+RfQSAetGhJ3a/+jbPBzkkx1g==","shasum":"62609500b0ec44c580912f1b22c9b984731beb46","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetTCRA9TVsSAnZWagAAExMP/jx/AY+vA1X9UOB/bFFS\nFJPcspHNJCz4JPmBKCXyuqd4hgzp+22sBAnyxjzsyL7junsMifMqVjL8upoF\nVmKmjj0Bfy+fQmMfwxr5ikzVB0g6WNJmRg42fn5sXI29hzpTc+I1hHNnRdCP\n40Vv2B7TJL/SJ/dZrst74oGNNhAF10JZ5igJ5H12Kkhs8vYLN0+pcyISZlvI\nFglqEa1i14DQx6cw9yo/2DHh7d00WXEw5LS5VvENx0CEjYWwEDDc5JiVuFjs\nLiWAMxrSdyr3J2MDeS9CRntiRQDPkHPCMA9J7lM3ruZm1zCPPFvQ6NzqGvkj\n4cnaFYEwgkimcpBZ4GAHSNPbPP3hiALCpb2ZRhygXiR2bAlGIfIagnsdJXvl\n/zjgwOLtv2qvZa2Q+x4U11Ue94joFrLowxn8MbI/hT0ph7X1hlTxoodXslLy\niCw8hKnJlystPlUeTIvMi1s5BNnX3hTaZGvrqY2hEtJCLDU84MMXKCjPXXoU\n+cw3ccujsiYSw7Q6jTcdO79fBq51qDY45fcnMjuwA5Mp6A47T5lKfQa8bEFi\nkdRvr7O5arJ8P9wZz7gmcuCYd2sppauhJNwHTuX0TUDDelVBo3TpOplyZ9U0\nNyWZalM5s6XBymhZIib+EQI0vvM/ddGskOnWFlmvZ9K10qgYBPod/Y8DfXB1\nGli9\r\n=T6af\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6omKgMtNSbwoj7jA5RoTZvIbkZXbkUawoBCUC3BtxEAIhAM1VMqCiLZ4/u9J6wN6qF3lOeELULkFLHkTqjDt9HoWa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.d083d93a.0_1589242707117_0.12049353286975073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-ripple":"0.16.0-canary.c95d429c.0","@material/switch":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s/9uOv3CMC49nlsvcJpWFoozfguQGJZY8EMfvO0CK8ovsv87LCpWdt+5yxsjhNk9j6kYqO0ERCmlWcohKDkuvg==","shasum":"078725eb3ed9d75c72d599c77f88a1dd4698b658","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcECRA9TVsSAnZWagAAA+IP/2CMWuRNzxg3/FstEbbE\nE5tum/Fzob0uLPu6GJk7xlLVBo1FazzB7zFX0Y5Wr02qBGAZPMH4lUdeGfyA\nLFtO2uKNQCCwkpbIg4VeBiCBYePuw2y32haD1HsOovmDSIWO3x8EjmIysesF\nainH+a49yQPDN3SSVslvoXzWBYpl1TRtSlOo6HTLTDpjEGandKfSd0LEdmMd\nBGF2TMkcRT8buY6qbYE7IM7tUL29bBcbZ/hVdx0Td0sBpvCGXrQ6kPTNLV7J\nBulVe7zM+DD3Mm54mSgyV+tNVNuAz9aZLrY6dzJDChcuY1qkDGu74WhFYV1H\n2RQzs3tdiDUcJIIfW7wFJoF6wkFER4V47ofz8yiIk2uT7Qn59HbZAm/7AerX\nd3L1lloR1lHILQv78yhWusA7X4+4KL6TSdbzDEJplGvScNh80BojD8G7Ub7I\n2xaLh7SSTH889CZomKSSXwB8Dqvzxh1Dw/E77zwi0fcAc2GWc+gODUnAxRtj\nIeyO9CuLRxpQXngSxVH1uangLzYhdFoINkyRvL+vmvYQJxr1VSUPkCFhBGjM\nEUP1prBl0UdsnmozuT4uDTPrX50FItV1VGXA+oVJ6RlW0httpJf6q6YWeDr1\n6SSj3Xo6suE1oBDKN8zpDe/il6SfwAWZNbQulcH+e0m7PMET2vjwVRBtJ3OM\nZuBQ\r\n=AjpP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmw5i/xK6lBdEyqAndgp/gBf4nWRVOkxWxD0fIKi8S/AiByhmA1biwD1QckV//gYvWnrlFeTkzguo+kRzp+GEXedQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.c95d429c.0_1589319427286_0.5855349543740678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-ripple":"0.16.0-canary.0c1ad726.0","@material/switch":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PEWLEPaWW9LcfNIU4mi6DswTJ8r/SIXOVdKDOldLl1rjzg4Q0vxmgoUp8VHvDuElwAomrrpatOzVb84RgBZspA==","shasum":"c47148867b9c7c14550d10da7e7e5a6ea4258895","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CRCRA9TVsSAnZWagAAZr4P/ixDhrU8A6ySz4plZz12\nNPWZKKCIpT9eZIeMeIkt3cL733sHV4x7KYBYwqqNqw7osA84TZoOPjGej5KT\nBezPxx9r1fVnm7Egb975p8bJqh/dWj3c2ejSWINrbLErVYFKMY7WsqWQqSWz\natjjZQ7tkJ5S/Ckq8cXTanaEXX+EAufrwn0ewSvKaFbcLWxva9/DkoBw60PI\na5pXJZhzseiVqAooJTZRG/FemhB7KkbUWitQQEVB74jQ9EAtH3NY2GbaHctT\nHoJoyxqEtu6TIssnO+imT6IwyLzx8kssCS9Qb6uONg/aePAEWKuNwoo1FVD7\n5zmHTznF6AbtAjs5tNzXcaM63uGHbygKauQBin+7IZVMmzy4YOaDIp+jOmW9\nHHyYhYULhXDzP6WZ3C0wQBvZTi4H73NGU5tMxAid/8VooU5b5H/4YBj66Jqv\nBi1Daa4+VbU8dpFFkwhzDCddZ2wLgi8yrbB/2FpKK95UfY/pAsUM4/gp9k6v\nC6kXt6Ny+M7kGFfQ0NrGg84EROIvYF8OEPnEI3pznZwHdKR665sA+QVqRcj5\nXIbuFEAcJMECeP1wRAQHB6860Q+biAgnO/+GMM7BASf8J/ZaC7IOdv/L90YW\nZVQjHK5y0AdPrAO6jbQbpABId7Zz03Gi/aKWOVubnfBaLYW585CCTevNhUkx\nq82V\r\n=2AAH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8xU6xzIyl/rmh6K4J/Xa/y4piAaunyTHyl2Aadbc9sAiEA5k3ZTwRmpFCBm+rA+8Q+h9PDEg0QyIePO18LZ/U168Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.0c1ad726.0_1589330065355_0.355036992030366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-ripple":"0.16.0-canary.8b6a4700.0","@material/switch":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hyQ5Qs4VHWkoDubjyjYyDjA2QQPzJK7nR+IgXPRrN4PNoPfM/I0at0pRLmHAhksmrC1DbH52QtVb8gSKgvOKuA==","shasum":"bbd70dff8dc423cdeaa687e89213cd67f3dbb0dc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwoCRA9TVsSAnZWagAAeQ0P/R4zyFx7+kkqKVRkb1Oj\n/FzR8x63SjIrlgiqVxsTZGDvU4hMOsmXYJZt7XS2wVROufDX4DsfunfDkVrc\nVfXtTXIQf0K4xE2ahfEefxLRw9j7We4AC3IVQaZ+5pnYoUUXXUUXaXAy+WRh\nl2bw0ipRMwKLiO+A6VPH94fWRVBQubLN6KS7frWudWTEV98blyz8gP17tIWj\nrgJ3fjitVZ9SenwCqdokpbAfJyndXayJ1xxQ/DrloFP0U4KUf6vf+d//5pe6\ncyrYE5qE0IBnp7XDCniFkM9SrPa8Fa9eD5E6T8m7aZZEXczKX7HxcsB42d8J\n3yLlcMLh1VKpo6m8xG/s0G/krac9yjyvKf8piDLllLbjhusrfbqGucL74RVv\nunX/yK3DzZgr+cEntYK7A+EhgpoE4Dckuoi3FYZ9LaDa6csKU3CuNZKRDTTO\nGrRTmGeixiI4pD/lsMSUF5EV9mZL1oe6mBlcMiRkYOMawvBiNJjuombAe7RY\n0DPXb3Js3iJDVnwubNlVrPFwEAM/MqN5eJ8PHTJKz5uAlkbR6pdJVsEJTRZ9\nIGjF3M6OSrdlESyDXnHeZKryPIPTPBbWAuEEgUe3ngWU1UynGGVKplLudDUH\nwFW9/lteXHreN8Rzrji5rMpnwBzVPVStL2xyuT+Re72SgoeJiObkEGSVTh2p\nIYas\r\n=/xTn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp6tQ2Q49GX5ADWh/w5ohECvIC7Z1tsI805v+BgBp4RAIgHKZAm1/a1hZqyyUwsjQ8omI544pJjAoapy7HALRWUGo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.8b6a4700.0_1589390376054_0.670989753170949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-ripple":"0.16.0-canary.3270effb.0","@material/switch":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wAeHtiT8s7s7fbHJav1jOGJtkHBGucsFqaccL6aTUcQhcVcJyJfHGk0oVXnE/ztBtsvflKrCpIplHrRp5hR9YQ==","shasum":"b49e4d0b569dac7674dfbe8d3a3323c6cca8c2d1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWhCRA9TVsSAnZWagAA2EYP/RGOUE8umO0hgYril57y\nZV3JoMouuMN+FnOJevd10NmF1JTq8gZlrhyD5eWIIj6C09a48IWAL2FOETRZ\n60623nIWtq78qn1Cdt9t+U33zHhcgjnQHykWp3YUmnQWacZMOYarf/pE4HOE\nR5bw0l+2WSKT7z84PoPWLksOIvScWZVHaThzv0LEe7h48hnITkH2hsPRM6Ix\n24rERXITzrdfe04FQ6CBOCKR0XNemtb31b4sLsf7daIC4sv18h6WJKVIpZbK\nDWhr0AKhbjVyCHWdha3B01IiR+rnz/uwlmyVmlhsC5WUusjXu7WR9RVktg4J\ngu3OHnEkj0xIg1YMxFQ7oVEuwzMUzq9JOjCsPOJjetIhJmfiFKmQwkVgU6hh\nk9R+pmSWu4sEzaGWbpfUHmNMfWHCX9OgDz/h3G/qccdqUR4Q+j4SA2YaP4A4\nImdjzihX91qCRzLVR1QPk1bDS0br8TqEjCNG2hbFlyk0oYpv5M+HdaCXVxqH\nT3t/2JlEgNMseqB7KNnfGim6m54JUqB7OuFixD4DnqvUiC/N6L0yfyqQF7pU\nrypxhGWPXvuAEx2+ZSMoYsjV6VNP7a9QpEfMqFXiXwKm/fw4egg2pJ40e/1S\nzkm+a5F4t8U4t0qma9OF1PFYEyyKh6YtTsAcAesQXuU1vSC1NJwQXSKkHtSN\nnaXu\r\n=osfO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGy5C0DP6Y60+IfRGDp+UEWXcUGh9fkwqTGyL7DoiHsSAiEAjVM3AhxZNhcRyyi7b6etedRqcgcwEzsKHQZoxRASi7U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.3270effb.0_1589405088685_0.9572672169345355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-ripple":"0.16.0-canary.832e64f7.0","@material/switch":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PBv9WLzCo5jmp+U7gBixXUhDZZmg1GuteuqmTORrBbeTjbRSaVU5io6v6LyvQVxDg4bXgVB9yvh0FDwE6YFcgg==","shasum":"5fea624cdc1996220911b7f0121ce14257ff4f82","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZFCRA9TVsSAnZWagAAamMQAIeXMK1w1zdXxYgVRdW3\neU4LJb6S/0lO9guFKBXm+tr4WW2RfD/3ser6rDrPVFliZYl1rkx/KiJCVkUT\n+YRU7ts7kusHltPFuVcrO3TGd4544UyXqP73NoSNm+PQxr75DfoXy+sCHHhl\nD/KC6Qc6QORAA3VUL7vXoUVTk7Eut/NJkgZzGxaQgThqcMs1wCOsmWF5yKS6\n3kipwqtXw/Rrb1rDHjVaZaAiYFkVOHfqdGJ6cfXRzfEinJ3oHXkzzUOtcnj8\nEF8BmGL3k0aFXp+daVR+PEPlw5/nwPalXxLanGi0l8Zam+IHwn6fZRjOVNBW\nb66oILAMmOPNPDsZpGQNu+6hQ/KPrBPHo7EnFBLKDwQetxHOgHMz5n6fxa1u\nqKJPdM81AgzMZg5QoTITRUoh/YC7iariTdjjTCzsSm7MmhkV55kxyLuAFoYC\nnphwa17WJOkS+6Q5l9JTs0ydCRP/vSTnDz8B2aBRyT/qHaPlVzWnQswmXLeB\nTg5a17LMDLQr/fdLQMyAO7EPaelHl9fEiezwuHIk9CJqX56lrWGNT9eIEg1/\nPySSyYlfYvZ7wKRrLp3r/a1WKOj9oDNq3VyjO7DloxYRkGpCtOSj3UthqXCC\nqD2Ol1Jb+ACssqfRmzJF9B5XpOTV+jd2vNe6Ni+vgPK1fLh4vmOgdP7yDQ1p\nVKg4\r\n=U2/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCb2ZxcWvEoFk1sxgOpWT5qnChRkx+uJ6oWy+4OcKpqvAIhANiovPWfBj9bbPbqFwAw6Z+/GLwSyxcvT7Lioki7ip1+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.832e64f7.0_1589417540690_0.34839644193719876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-ripple":"0.16.0-canary.472fc4fc.0","@material/switch":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kzVqd2DQlu8bpYvlkgvGrJrJoQaD3ExcWv6o5/kVXXyvSfdV12lRJYux6G3cV/CULbEcetn6RzWHp84P0+oQsA==","shasum":"3c8cb3b80c43c43875f6c870c94fef30197b4bb0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLy/CRA9TVsSAnZWagAA+mMP/0LS6zMLQ2YtB46RgIim\nOp4s8uSMfqUy/hsm9tw0xGPiV40II3oaPPgCSNwS8bRnRrZM156Pr4o6kSwS\nc+t8wRmTUKvG6T7UEKgPIGZ6CCA1TUkHt6js8URm0PIltjefF5CJun7L4Dpr\ncTbXw4fm72LnMo+Y+L1g4//TczNEUCjYzHlAHZYHbCFQMnW1M020i/uC4JKL\n59II27CspCQqucaxUWJjcUKcNLFDHjVI164XtSEoXHITy9J4taRrgGZQe5hy\nzjjW9DnNObO+znJvMWlmwqp2aA/ZJXKSdI59XZxdTOsPqtMjoP8ma/fIO+hH\nyv4Q/a6dLbTP+JFNsqIg31Epr3JEuc36G8tJxnZI/1T/49KpKdQ7qex65o69\nzGVLDKbux//jG5ND3ep6G1zM9k2eggj6/3oqqgWeQfa8F4WZ8OgCWqMKiZMr\nN6HvjXkp/sbDCZffSnOpIMdCk8Je8KS/3xjb2U8Uk0HSLPZ9VYtH2u/pzL7o\n5IH7qFE5ItL1p0SFzRI0MhV67MR0hQT0jLIS08IBkIA0ZNcniVbL9juMXYJ+\nmWG2VfrYVnHdC6aAkwz9u/ov+WgGGL7hR2VeOiVgbgI6oAk7Pp5oScBWBnhv\nvl7mak/9ceCng9sxxrCy3X0nCqBXFEoGhrH2WN35F/vObpMiRgYU0pK4RYN5\nrkYt\r\n=2Cbs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfY/UGEEhhF7de6YIjeKjcVs8sYq23POZVwznH+Ou/tgIhAL9EcmZl4Jgw182qHgHXA3SXCLOR3STm+wRNPr6cTI4L"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.472fc4fc.0_1589427390807_0.9491523609754893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-ripple":"0.16.0-canary.4dcd7dd5.0","@material/switch":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uIgdxHZTcTbsXJYI6SJxPmboTLZX2/lIhl1Ij39ZAjW+7xexSo7nD/QzJgvt2M+GGKp/Pyd18vGUUPSiu0HWxw==","shasum":"32c2286cc1878770fbaebe6e88d34de1517ea4e0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDsCRA9TVsSAnZWagAAeZ8P/0QrIRvCbVA97SSiIJM6\noyT9+0s6KL3PcCTusrHpfiprbx6cwEw+RQ5doTcX9uGD7tu5UUOQHoghFd67\nKAI3/KpDphXOkl/4sybyUkQGc6vySu4sBhWg6kInu5GXiqL6MBhHpL4/4Sat\nk8obl6tbqKXIZuDzRkM8d4JnSk2wM+wCyTxHtI+RbqlbgRjhLr0L2gXkU/Iy\nI/5LOoizA+17tQyBXlsqcqf/mpOKWhmXuJ8MMlAtSHjgaorxxoGuMNTnV1dA\nNzx6dMIw2kplxwUpDyq6fwjh+N5YSCXXRJtdvXZ1maj6DeAoAy6kiGwq883/\npJnyf6/6p0OMk6tdSl7sJuvXPE19ppMvo8E4WIH6QzEos/fD0bBp03XIEVCb\nkfaWzC2JJrApO4Fmv9OZBJImLtjj7IzjPyUM5AMjdYAww7JmFXbxrADEFarN\njojMCG1+R+8comiF+sZOfYbJw8UapS36g+QOfE8LR3UlCfxR7DMuA7G07UR6\nvR5ULZOdCJr35IF8zwFqKs4sYuzaQ6vtDuSpwl+QydPGWf5jRMy+FyS1GK20\nL9iju4mtXUZTfIiqEY9nW8XjZLYXPevbdrO4recPD2cy5LCVJAwewF6deDbH\n74IsY1/9S7+RYxgCfGp2c/qSRePkFsLr//8aJ7gPBzs98wbrx9fciiUhyOIp\nOaQs\r\n=NhgY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfukf9O0dsdLsZnoAZs9A5q1MI14qRYnSQ0AlJKcQWswIhAOkJnkECwzxyWNyQfabztp3HUJAkWGKYNP/VNP8W+aMu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.4dcd7dd5.0_1589473516457_0.080818267858761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-ripple":"0.16.0-canary.bcd3400d.0","@material/switch":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2UiAcFDxJ/5dlLptd0Cz5UfS7AsAibmHRScmecL55iYKrh4+f0ReqtkXIF108gTRCl6OLL2tSD/Eq8/suSABTQ==","shasum":"fb99bc11ff7e30cd75eef25d693fc9514228ebd7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyYCRA9TVsSAnZWagAAaQkP/idUEqCQhVMLrgLTRDm7\nfRsv4yZ9+XhvNY3UYC4+9Wa2XoB9Hmb0Ami4kDv6wP/pdynuuLX03tByUycd\n9tDKcezKgBl5iuxMgZWThSWpD3H9SweVJhlxfgJzFOR46IqdMRHyBjAMhKoC\noyvPKD/LTCWArCtaAYs+nAOW/tGQodoX5NvspmSTxsLpODx/8CoOhAW+HbAx\nzDajytP6LfCnM7tQ3IVr6FBQqHtv+b/eZSyHMbky1lSBkwd1O+FssQ23+1w1\nSF2vW5FkTwt5ONH+0zJO3EJZ4k4Kv6O2Dax5+i5hNCCONpE4J9AtzRZhkRFh\nrtqc4N2VuQTgsnaKeArxnnmnK9uYHwQRIVMR9mkndCgFVz80jG6P6JgqR7lA\nNRHQXd8KzeMEJQuG0PYsh1EtigcDt7ONyqfytPo7vLF/sTzCfqD8PGpcpYPt\ngVy4NaYv2nFkEO4WKRHPtC0rhZBqKZV7KwFNH7bYqvhJJZmHXxY32M0TvNc7\nufuD/0wzBNsI0r6yM1Jil8ltHh0ODDvx79lz4/xP49VQqjyOyZt8UK744dsz\n7+jI2v99nUNuq6FKj00EudoZSYHvkgKjmtn9BdDlbnKK+z55Ni/FyF+PiMEY\nOBvJmJAZxVcBr3njZ+ibUPCq1Uq4hUugf0qUNEnsEn8Qk/5OEtAad4dECrEz\nJnWb\r\n=X3wg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcKWctmCDu9jZDG3H1DaOAReE9m/RQmUD0bMSADl7jHAiA8KnFMaA1SrKqLHN4JRmhzZfEZYzQpd90aonEZZme6yg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.bcd3400d.0_1589582999989_0.20534940952782188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-ripple":"0.16.0-canary.91f63179.0","@material/switch":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DtfRM2V3Nk+hBR/TG8+DverDeqGYOiVdmgSNewyvXC25ydVYyrqNGzDGAVm9eY/nk++UNUE9W1nnjWCvy6qXAw==","shasum":"f7d392f9b2c1d1ad9c234b123c6633ee9dab0cce","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUgCRA9TVsSAnZWagAAfjQP/31JUrp1lR4EoOKTeolQ\nuvitxDxXgCBBeW+zfeoZfSQ9Ktng1+535Q5xktZq9O6W6/8EGkzDEkUaaNVb\nUunsry1me2ejx1Xwa9pJ+BDSqgUYrUpbCdoPqK9bL/F5MrRFjjOKKyqwkAAC\nya0oketEFdBBCZc62kppRPLdt7ZgIPZHMRCen/HQdDdgz7PhC/CRzfT0TLXm\nxOgw5coBt2E7LkMq4zKOIvjz3CeGUavWR7aOAKU8oKdxYZjd/yEUS1lJSMvT\n7oG5zId06OqOFGzEY9NyyjeyWmThh63RgdETY4d6zjNmBUkew7fFyq2FEptv\nWm+MPwJ8y94oQe1t5qlmgygpiPC8DqALyhfJsVk2IsoD658QLsa4HAt/gsYg\neo38ghEFOlaMmq6M1SzYj+MY/IWViMHgEqPqcw1Mv28Znocq9QgCZfU1Dh66\nv8v7UO5paCzlz+1+7Y0vnLbNv2h3183BeZDwsX+H1Qas0oGa6/L49XOH9lZh\nfAYpgln9MY2cnAyhYOWslENDjjmlS9A8veDu+urwc7cab7EorLm6M5O1higr\nasJKrN2PJRlZ2ySiGnsMtalQBAu9llbk3tEjNJBQWEC/vi0Y9osCseghYtAi\nBRSdGb1jJuYKhHe+0gWiMX+Q682rkcTRdvhDkILYzR5ht5qyX47piqZO6gIF\nlh2r\r\n=FoIE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCONysQNM8aWigr3DnedtAgVy78yExGVRUBgeWnoLvjBAIgNJirnpya21K8WWl21PL2FcIAlvyJLVBpxZvpQNKs9TM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.91f63179.0_1589589280279_0.1387548798013043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-ripple":"0.16.0-canary.b8aafb56.0","@material/switch":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EHQ3Em2ryWoMyjn0C4vEWKQNkWOUi+4hSLDa0/NvHp7+YfXdNRUytEwtTlSBLUmZFaY3qQevXEzQm1hR9u3zRQ==","shasum":"ed722d78c0f8341b19456ca9681a198e2ccc6e18","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSVCRA9TVsSAnZWagAA/78P/RUq2zBPqH1OZuOPG4vM\nD8ZvNqdZt2J3hMMTy7CJVhAsrsFgOMsVbwz58brPOqCX4PrBfbW2eMyYHRU/\njsX6qc1/zEroygRp5fsGinPoOZCwJxLUUXz6qTXiBPJ5OIDB5HCYdxfG88SB\nK94URAU/AqGGcbBT4v/DpLOIncRO9nSnCt7leRfBknQmfeVrubcQ6UYDW5CK\n4X2E45/7duL+a0JrroV/TzzL989ZG+hqTMu382dhvRYnAppyQE8FR5UfEr+V\nQymAzctOUoJgc+nT+DRrSBGcB191uA3JTo1zL1wcmGykH/h1T8sKjJ8ICclA\nk9DRxgziCAWBZMz80XRPFcCgW/ZkXW0/j5LwJ64h7Z1X1oUE9U0wx0m1TFfs\n6M74HfnTfGMHsItRbDkvuBjESSLuZ5TSoJOLaRG+dlWDu0U3yPH35tav2VUh\nkyWPNYu+Es8NGoCNC3HFZ7rucq0rV8PTLD2Z4jbkix0DsWQ5OPPgcdGThJZf\ngfGK84zrupu3gGCcZwzLVD9BJyf2kipiz+psER4g8xKUooSfmg+80taKRnTZ\nDlsbi2ZFCFSSpn+kCBPn9aXppbQr/V87wW9NI0LYLDaIa3GBTa7+QPqnSL0c\nSCKA6AT8adPAVdplekvswBULPAUaSkPYqd9oDxK3gakxA8PdtqAnVbcuvIng\nAsTr\r\n=ZZRq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHilEve8xqCJ5NQ1El+F2YbR9kEM3FDpFtls1ZhDWlkrAiAQNMRMs6Y1R7NbIJ4nZMmVp6xA/Ij0RfeW43vajrGIOA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.b8aafb56.0_1589826709360_0.8629289060891656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-ripple":"0.16.0-canary.a564b194.0","@material/switch":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GbmYfzE8d4lO9hdoJNJO1T2p4bb8OP2SOQGm90vnUcUUBdTPma8bM94Gpgta3l2tPcaKBffw1NtihUbqrJuaYg==","shasum":"557fa52cef709d222f3dbe2f774bf73d71417828","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRSCRA9TVsSAnZWagAAmk4QAJ+Dn83IjgriFr0baMuP\nQnWb710dHBjJS6lLtYriaz+mXNr+LrEUYRt0Tc5s+DyfJNZayJC6/P+UxQ5Q\nX+PDjd3VhfOMZgqSuPjTMBAY1WyHm7QtKb/omZ2MUMIjOQZWi4j6O5G8jS8j\nKke7x8GFabpJXG1y1EgZJGUAzKGZvHutVPh49rGW5CWj9DmDh+sKWmKqNC55\nB9IIiLvgyioEoJmwX2PK6GbDpTz7VHg7BY12A7uvuIYv6xQj3PxTaV/LDNGA\nM9pZOjPNuo41tTrFFRSUx0XOlOvl21fAeN5ICysKokC/kGGeyTvB8mlVw+PY\nMypzB3SYWW5b9ap9ZDeIwDwbTsSrfMoaOaNJdEVaPOlVbw6F3FmhMKcwZFRv\npmcXmkJQ/gQ/69TrpAazt+7YgLtr9W1G8a9U6cc5PgkY4lHLvCDeC+H/ffpK\nCsmgPY3Ew41mX6CH/ywemu0TMCHpn0szVPTIFiIZDNo4dCnOh0/D4yMiyBJg\n8DW+YuPeAuwT6HfzKENI6o9XOO+pNkbmX0qXV6wvUvv3jrWfuwNvvzlZ6/6N\nWYo6CdEt05OTd9CuQt9YGKLRQKAAbQLENVRsI7Q/bYJb774MNslEspKDW0ir\nsLrGHnRzyHkN+8lgp5E/iNZc/yQUS7AOMihf/4TwZNdYzzs8nBTlJ3mAkpRn\nokJg\r\n=gmvK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmPxvn70qB0RH/G35TcC17izhmCA5fzyQ+eV992RsxrwIgan+nFGge0GRRd5c1FId6J9QNOYFIQfaY14ZiC2IwPbo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.a564b194.0_1589843025434_0.1581644379034639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-ripple":"0.16.0-canary.ef56465b.0","@material/switch":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-g5mis4qZORudx/Q/vyCvu/IYlz9cVh6qKrh8aPmI4WSBSYiubrWv7/slZav8tGGVD7/zI3rBqefUkR4MTCNlLg==","shasum":"139313cfb0aa6a506464ea68e99dab9b0e3c4189","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bzCRA9TVsSAnZWagAAFPsP/2DZzum4n4tP07Bv0aIb\nQ4isCOPvKhqner5UynIluzv2ngwoky0aJWX76NFcQIqr8yu87InL60JFzYP1\nV2Y+6dk5s8YCeg6iairtY+vD8JhaZ70CZb9EGJ1TkHcjLxOXgs1SrJIQL1+r\nShRCBiMG3w8Cout5SqLbDoWBuSOUccuZMHuSaeW0gGWBitkvYphjgyRuJE5Q\n2h7+TYSKbxDmKR/wVuu5kZ9FHCnHfeZI5oRVSkZr/2pQ6P/xg7/F5lpL1NoN\nDIKrczwEjSqFJ1Gr6bqXI/jv2Eh4ljXqrRqwhZm2JZUxAOc2/begTZDvJZgh\n2mRDGSVrL+kh+F25EQiFqQ2IgYCcx2evL/inW2C8s4+AAyz2MCO3PUfp0rbv\nNpE4zoXCqllHVbKZQ3QKD7DRtEU+b/OjTGspmTU4SQLu1/Og+k43shyYCXim\nBBLL6Hi3xSDY9qECDe26bj/bUFjCBvabzRy/DCImayWsVtLfSjIXgOq2FprE\njb8KilYnUQ48l7WeLKMZBQw4cZUxT2OB5xX4ifIftdusvt23RivOnJEFN1sm\nsiNB8RpDhwKhaYMRXrkU6PCOcIzuyP8hGgqQjCXspF9wnYoTWhJpagPnXMUw\nSSHrW1mrHFZmpZDlkNrPkMIMjDmCx2haEJJI4F89OTzQKssKTisNSz6YBnJC\nkSnN\r\n=1Ocm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWljJMj8RnbcYuU8oNJadboLtRLnhHrXWizCFILAVRMAiEAppn9HHdiPNlCJLUhheImJ5OVMpGjZ3jg62uy/tBUdhs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.ef56465b.0_1589860082621_0.20963909288994942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-ripple":"0.16.0-canary.c22dcd71.0","@material/switch":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mNaC3D0IMBw5/bBiOHT6KsQwjg7AEA8trCyu27mOSNhJ2YigCF4XGm1II+k9uUU48sJ7V0GL+hMVIk2XeeGS5w==","shasum":"d7005ccc01e1b8213e9ca1ed0b27b327eb7b12ad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZNCRA9TVsSAnZWagAA/bEP/2sp4t9006nfZbCJCCsG\nfe6VqLazdLRKTVOdwq9V4zrqHvxO8HaRDFr4xlQ98d/eLjcZcEhbOLEOv+gs\nVlTiiz/XulAT7GOEAHq8JbTyq3U6qzt1vnk8SQPrZY+U9kRQXZox8EXg8IOn\n6P1xDrUsyCVqacMKWcphJSW7SfiPPcsFIi6WC89PJO44jz2mgJk8DkLj8Rjv\n/4RsljxvpwZcfzeCUkeRMsJYMwpmfDqBr5GHND0pgVh2gJm7GFi3iY+xmQIX\nzKnwDNv3+C/v7z287yh1hIv2WMspxIcX/HtRFqALt3elhFVHwYu1QQzRq7bR\nmN6syJIEhFPi7AoHNTRSzLamwJi5zoDg8mnJpvDOYYgGqgTAg2RGONECx0Wo\nPwYy9pKh6niYKElXVLKV7JSFm/d4AlJfWd9zoxxcGjtPGkopgeLZTFbmjzMx\nq+KD05s24KxUjyjHsbIGlgSJbJX7Gcts7C0wFZ/RtYYODtO02H6CKRN8cwqQ\nKAt4ctBvbJQhqfKSgxgsjMVyVZ2a4OJV6Qwl5gJg+Y6rrQTY7VlaYp/tWMlJ\nChC0d0MgZJMladm9kRga4clynrms03Uq4EIMp47sVh20ANdYvl/iQN3I2svp\ntUlAAih/daSuyANctRxWEX2gI6UQ6I5QhBOKhBSJBhRDRwHtVy22UiqlhBpP\n/0Ev\r\n=Wq2l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEanrP0xUkhSVFxhC897rEADu+5nL/2OPpzx/11kVhN+AiA+HHB++MDAmtEX3r2+FyJhDC3rcPcC1MfEelQoaSnB5A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.c22dcd71.0_1589909069179_0.382829147617473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-ripple":"0.16.0-canary.6eb62388.0","@material/switch":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xSj+3N4p8Njnjj8zKneHk7Ycp6/o0zUnhrEuDvzsfO7pD3uclcStizgbYIng4CggqrvTAubKG/emv8hIAUIJBw==","shasum":"ec9763aa11a1bbddabc0588401c66b1c34e50ab9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPMCRA9TVsSAnZWagAAgFMP/25o8k+nUS/bJ+DqFz+R\ncmuFNG8bwJhLtjNJMxKGUdDZIlIcTfv3uYwSV6twSUJpvMFBMgHUUbkwnFUq\nOOcy9YgH+MoF94NulMeljw3thrvbl3IMqHnD7Ar96K9YPBntePN/sRPfMRm9\nSh5rESiXDI3xOQJ0AebOSNrEnr+7Xt7RnBJiHgC+cpAs/TFC3MdlXwsQBHDN\n+pEApulN34EotrTUkMVJPJkMC71HYCWid4HUuGPewPTw6xwgZ3tdnxKlJH2N\nmhyXEQqnNY81NEIMZmJoGEXIf42UhGQtyxUvk9j73AhD0u4k8ahqNmeT2uD3\n8qugd0B/WG/82Pa2gl8TmzYFx7sTTlN7Iyh6r0UbeTM5qA+tAg8xQ/TK4CIW\nh/3dfM3WEvRZSUdV3kbUROIXfO7EJhtgJnBgIkQwbbIGA75tLqr02YLdf56O\nkTWAdvnHYedTD/gD8gkYXCZoI14+fKbPJM6hF/f6FknV1khmSWwznY1obpXv\nyY8hYoVCW7NNFe/0MC6ZI37aykRcLs3wgxT0kdiP6toTpM23Tx4BchiXDnsF\nT+Dk/WhYrCxNxCglDipyglOWQ06BkNDtDZ/rh5J5ZHmq2nc04GfGEWWbUlZJ\nuOmKtI68cfJ81hpNmN1C4jYsAVDW3y+9kMAANZZNF/scetoovm77u8cFzI94\nAID7\r\n=lncS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGelCHpYkfdGxCqFqKJAvTNODI0qDCtKxxBq0zALZsi+AiEAh4GtuOOG45G+c7InvlXSfc+LAg7b5gp9HWNhFY1FSY0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.6eb62388.0_1589920715623_0.5195887922035991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-ripple":"0.16.0-canary.9bc3230c.0","@material/switch":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7LRjpVuE7XlCI5l3bbQJ7fvLMyzqJDPppzmEigCCnWw/2Zz+3qSk99emK7emGdiIGySv3uP8pPkKEGof6rTH2Q==","shasum":"f216d511ad7f57abb9d386c96ecf220823a56a7d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFH2CRA9TVsSAnZWagAAk/0P/0lfZ+Rqeosf9QBNMgzn\nSkCm/9tob77tqEyRvnxOAHitUJjyxEmYGrxRzGte6soMkeDQj9NnTEjel3wG\nj9S8JgusERYGu7PoITRnIRABf6cJ5MywQ6R/QNZcLuEi2aloWnx8mYBt7n+f\n3ojcNQbPnDDsIGZQqoNQJQYV4jthKX7gIX+XbhWEyu36sRtevdTkLBevvcva\nHTrtUp5eXTKw7O+iJBfCHFniqVWnZwMyAxcco+pLU26gjoeU5OAJhEHm2HCc\nLt/l/f2uHdhxx6utlttHDWdQWaK+F/j7r3AUcFSFMheEypQ92LPCdHKt1Vaj\nMs3IyVH036MAUEyzJRHYcsfnVTrLrl7ayztQvRTURvfQa03slpZ6AsbcItbb\nWdBX/n8/JVow/Ok51pUuLiDr1ORiU/AChsMG8MNuLEhHibj9FQdUZ6d2RchU\nsRjrkpnnqbLBFMXjlBDSzDjCt6x5F1VpnbkumOtruL5m2xfUjMZSPUOLExts\nvQDe7XakRvhMDUUhZlxde5pRtB5VcLShC4tw/vSfoLeBI0/sbdaKGNiaqAVI\nbPt0/sb0YhBtwKyJZKqNAvRoFlPHSaUCAoh3cP+vOUNZM5XTsAL/OBNA0Fit\nB5FPS3gtpNSR2LscU2iC0V9m++XNSJ2n863nlEuzDEfWOgirjqLmPXhjLqKa\n7PJq\r\n=b5Jm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNxmCHKosHey0aTaCmtiYX1AJ3EPYzEKTn5zV2l0lzygIhANkoY0TxHkQKEmfi3a1fjHeDaKwhZC3qV2sxdwHjUsgt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.9bc3230c.0_1589924338420_0.11843320048462558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-ripple":"0.16.0-canary.421a6856.0","@material/switch":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BxLScG4KdNvcCrodmmRD0rlzXBI+kKYtjE4YlL7M9+4ICXrC8nmB4KcEdcU7Roph/eA6rlq8iIQd4E5BwZwJng==","shasum":"bc0b54c36f8ab864d3897c59c4a782b76e3d4a86","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8JCRA9TVsSAnZWagAALsUP/30uaMWZHyvFAObnG4Sw\njVf4RX7mKyXHqzw8Tmo9cGZoNcX8k22kAjYs32jRemoZIOehTWIBQxaUJEAv\nIHV0fk826EP5uwJ/LO+gkhBxWgMaNuECn2ffRJnzpPJ5SSxlzt3xbQsDNLmD\nR4uyRjIYsgq0nrTboP9bV3x4Tn2fAe/T/0/mKFJY/OJoip/blJAu+Kn+mP7g\nSS+dpQ3D0lEcNuYplWdYhK02gSS4IMVU9qNqT126XGAunTrJSzYBxS3jDoVU\nbA2W8Wt2Aea2WtH3YZg3X8tt3EzUiOqSa2dPqBm2If10tbSePYiKQ2yqJfpC\n5/VH6utP9ksgXQZPKKGa20BbGE0Bzax3hSwPmsBQYirsrDrO+EA/rSWS0Bvq\n59BPYdB8wbgzbfitpohPpF3X0deynzAdFHQiIbwlmEUuu5SMhz/vyIEHCn3z\nogfgnZaaa4jK1U/mAHBJR1CANqtH0TMh+QHjOQcj5VvL4kYyPTOykwc3I0uQ\nXr0CvneAgUOneb5BxDYpYJvbPAVk6Dth+xBzuK7xTSaLOHxmywLIVGXCFYo8\nsq2agymUKwRMc2Ad7/+6ddSpdShN0Dge18tsX3GTbPQc70k3nhDYnjfft3o9\ncOuJ5voIbMsVxR6F0S9IqVWh9JuljfzdP8kl7s3iEqm/FnBdeC1XG24vxxvT\nrZbQ\r\n=lK71\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEo/1AlnlLSj0viMl2Q6dpd4hepc7d092Rjd58qwFWf9AiB+Tq4anoh/L21fWBxkdBAtL4SwVN/qiiStebmBWgvNNw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.421a6856.0_1589952265264_0.3513774964863092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-ripple":"0.16.0-canary.761aa6f2.0","@material/switch":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8GkbFba/OUS2812Oj6AJMqtpS41TVULL1UZNBbrPEAZS+7wEty98aIzQ9pW8k7rnxSKJiBEDi49OaGoOZWtTNQ==","shasum":"7743762e2373b5d52c3db2d79bc18433f0a4426e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGzCRA9TVsSAnZWagAATiIP/3uQj3DGd4qvix8uuNVx\nYdiTQMeK74d9uxG0jf0/aSnRez+pctOskUaFhIx9u+zQW/tSkPU/KgGOBjCM\n8JcbelllJvi+eX2NZbWx0VWhii4Siqvsp4FpOJcPs65f01WynawedXNc8TIM\nJOlTVEruAHeb2SZSDyyRwamziy/aylGIZF0alE2v8zWBEmLS35K2ZnFvNQri\n28/RaEV9GO/IDO/4b6e+eI0xMTazN8g35RBpXsCRddmap9Qva9LDb6uG5h2V\n3bhwgqGf5VI4mdeQzNGokMoOgBVidV6+NtA2TmEmieehMfWQ+I/gOfcpPQjC\n+uOOrC/7hvM6x6yQ+k++0EMde3P63aqBVSm5bZPn2Yy94ZVR+BRA4iLSvp/P\nhMPWNVvt5LmIrgub4aI3jXMWGaEzYqMy3aWKZseY87G4faU6n1ZxQ4tsC/4N\nauO33dhcdn1l6cLhVcXbgf95HldUzstXEqzJuBwV1+nweTXegV796C7tsiEH\nU/T9R8OUEIEaPjYkooL6xBf4fxVcJToWZMOnybyKxMtDJuYCoXPqLgFg9Ni+\nc8AOXkRxL87cbnhTfYw+vgWPjSibnRblGQrdXYGc3Ernzcbyj9/DBcQGe2rW\nssMGVZSCOiGtdSgifxbZUyOYyKIXBnssNfynVtMC335Zhp8POsy6b9NSOk93\nIyM7\r\n=9Vj7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1XkqO4hzH4dexfIJrem90okwQWHbGuxH6es/TQ8F7tAiACWM+2fTIIZXuxh7dtqd0pyZPcSg7kamhUtd9g6V2tEA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.761aa6f2.0_1590010291005_0.07776820643075077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-ripple":"0.16.0-canary.f8654c40.0","@material/switch":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zLC8e6KZBzMAc0q61OLdVONU8QjvgfhgVtaDrTHeC5RzVfc75y+B+P9AQjg1GoqE4+IaYhnGFwf8UFs4SOYKPA==","shasum":"8094329922092014126eafa93b0cc0cd7c8ec665","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPTCRA9TVsSAnZWagAARI0P/R00XlLBe6XiIwEodLmP\nZsTJuXqEyxtpNhu4f8CdmDLSavkUXvHaXkYqMqHi5GRemSKqBwyzPnATXv6L\nDC4O9lx3rQx6XPwZeRcd7wxHQ1MGClaxnfY7w6JCgwXZJ/AiBh1LlLl3FghG\nY2NShriVP/vqH9LPeqm0iJ926Yarpn08irtgrXEQHnQ8pTJf915KJGmKE4UN\nJJqEEbY1ymJDdIiHRT7ZOAfJX6+ht/jvnOv7s2YQLUyqwB56TEdejeOTMgsT\n9DC+a8RPKKJqnUf8cbNJCymxOJ0LjIM/PR6l6yy5foo+mX0vEjwcYObiclxH\nvrMNg8GDYwWRyqhK5cjeOjCHzqATCcApU1/f2QaQGHXfavedz39NKUGRM4wn\niOKD10V+e34TTAefl9LbOR1Ij1Q8G17s7ABa9wtPW0vnlTdtHhSX4GTvf8PG\nsoSTKpF3ymw/5HXD6qyMF3gHCei/T9yWFHeszVSaku0nIJvXg6ubm+qhkkOy\nysmQdq8P7d7CF+3CgM3I5rFa1/nfdv6+OTCvAKatHyAuCitXM8NLQIyniCo3\ndxDteoi7BwXVI2RFwHL9xngNBbu4EAnjF5UtwtldJzufACM8I2BMKbfALygX\nvo17VAdPFq9EtarJPVUKVYb/5J2NeEa7GSuQucrIy2cvMpch0KD74Zb9cFft\n0IHe\r\n=pSPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl00hH0AHpDm0eSN9XfvsEp/xDgncWd5Ly9f/sKPp7OQIgZR0dLwgrty5bIbaQBS4UOAz3gxEvaa5pKlCdlgqOnqs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.f8654c40.0_1590010834636_0.12007442160800852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-ripple":"0.16.0-canary.05f3853e.0","@material/switch":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aDgDrN9/4SSRUqv1m54CbOj0vkuEoDFvbkgNwFQ5gYTxhOdsd7syPSLaJJqq2svLliLYX51WCUzxDj+2NMD3Sw==","shasum":"b7aef0bac6953002d85de548bcae4b1f52d18e2e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtpCRA9TVsSAnZWagAAkYEQAIdo9wlS/lWQHjBiPo9D\n9Wfzlx6VCUf0jVBqTcrD7/6CrPy3IoUKwrfl1gZ0GgUNYGmPuNoMnp4q1xjG\n2zrBicACDRJgSmSsoqW54fBdDIFfeYU/pYc2OzEYDe6H3J9L6UJB9b1/rHpJ\nv2sEqVwNUhlVFeaR7Yx1LyfdlD1HIcfKEDjKhqnb58SFfzNapdhjQfIZsakm\nl5GKGP5/tGEEeqassqyzK5ufjhLqWW4FD/LF+EFCq5FtalfY335+F9sqLUBc\n7ZfauSFte3Wic28jCZ6tK8mw/ipdPoWCjU1cC/GhnVb1HPwEHA3pdby3VnY0\ny9aidL0T7JiHuDoA9dfAz0sAbZD5TkFmTefnjrpDgIowPgrBVM9ohUVCIYsN\nZesRYHLEEwuySBx8EOBWhn4nud/n9kmtmbnUflt6mcXNhWtQGAfWZ/88ivSm\nb+HvDFTrs62giGS/TANRRl2ENahShzsZcZMoAxa7ImnsLFz2mvCJv3VIrETS\n4Zge6HqxqNsjRHpch1BVTPfpZIdsMuaKh8kcMiojBgLVJynCJrZTXEAHzAWI\n7qZ+GFvg92kvBAgBKkntED9XfOOxiJZWix1g/bFEla0OHtkA4vp23sK05EzB\nkLqYrY3zNamtR2hpNTbUvAkNrRNL2aWEJMDUMDPh6U3NGgeAInXz2ZIlWEKD\nUAZp\r\n=EzfP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHI/lX0Fkg9talQQ+u+dT2f3qUeFcKB98RloWQ1Y9e+rAiA+1EcW9MNLFlP2aJzRdD8nuVywQYLKXyejUmcIPoVd/g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.05f3853e.0_1590082408800_0.1287410852906523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-ripple":"0.16.0-canary.5fe61f4e.0","@material/switch":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-16LxuKhHzB/zP+PE2/7xjwdirA5/9rsn7KLY6fDHk4bTKiS2/iJzgEGW4TBcr68IeITC69UcuFRKfSorPbNDQw==","shasum":"50de172a5983c893f5639beb44ae980ae9136810","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnFCRA9TVsSAnZWagAAgb4P/0Xy6KnrFXqJ6CuZIXXD\nrj1eCUVLvk6qavwReJlI4FSgJ8FdJID/PY/OlEVDbVH5QYbqa/UQEgrvAsrc\nyZElHxKxYfV9ANMMnaSnl1XO0WxHgDpOvXPYDl5JjN1sY2ca0SdWv57EUDUn\nA3mdtDV4hPaiSqn/qMkSuII2P2zibesZ6CiVQJ9phCLsHu4HRl/1rzpZlYOm\nkBGkdlOOuoJ6Da2GQFwe++C1bxM5qsEo0JOPJP/6ymR11FvIe5rpRIRvqof6\nUyljLEtRK2bfbMlkhYgEFxiLDaNUhabuxIEA6q1Wf+jTKaZjjBjXy27vHcFQ\n0cqd48udLvXRV65lD3Xy9Rx2sBU2Qi76wgRgXBCC+4ee+2kgw3jcdykMx8Hs\nUt7vw9bGMVrGAXKDXn992t1H2zuDNAWfngtF+C0DTx/uhXrI4TeiTBMZQ3T5\nWrG+xO1xJC9dWOqxFbTZv6uptQV3ncwjnl/t+NvVsIWDEkMHGJMQ3GhPYWgW\nn/yh1uSlj6e0yjI1i80aVs/NxED/TLrxvY+oyIWn8z6VHbjjyfOG81MKkSIH\nUMUQ0LkSp4fHxFouCSNZLmJSo+rLW8OCx4FKBQfWyyL3fJ/IhvNdxELJPgme\n96xH7pmKgPQjegnEhbpAVKZtonUvmXHzzT4EgSk0VunVxqRfCs4ItqZnMuJU\nwnrv\r\n=/9If\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpLm6a47oeL9PHqSqtiz35oQ/c/CoxXcT/11Z2RjVszAiA7kZAo1WpbCu6rvOglOAdRoPdGftWbZpe9TjuN55LuEg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.5fe61f4e.0_1590102469097_0.9971928579029814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-ripple":"0.16.0-canary.17d33745.0","@material/switch":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1CFN8TJp9k1MKrG3p3nynaAeB/PvMAEs48Ch+Vb6I4EZpF8h4H0p5d+SHvbvPu31IbAfuTdTAmnjvFfV2r7V5Q==","shasum":"45b0500a955df17ceeecb78922971ae9e5218b00","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBICRA9TVsSAnZWagAAExoP/2jFyQ4gxY4jRrPz2vxJ\nHfufveCHtF6nsHLSbcelxfO6fv5OCqvvOIAnkIJmIqQr3aMbXdKPxs4vId2A\n0Bq2UROGUMxY41/JOWiKud+YhwlQoKkZHyPItwEnO5QP1Sgye6Ow6DMpYrwz\nsMRFcE0qJiF09wYeYjfrAFO0MOPYqQmhIslXOTEAIezJ19EOL0xwZ+Que1fy\nDnp/vdrYcf6Xg5/gxTSNFag/cvIL2+4DugoLTSONbZmbW2W9MDh/Liv1K20a\nT7aH7SnyjCQjf2WPhagp6oqEyclwLcs2RyjS6e9Clz7L3/cqZd6Es0Tm3BXU\nsYLDclWAYo929J9jVJgwcBKE7vjx7SFpgB0dc/JJlafeCbQEB+0R2l8tza6D\n4ppvah5e4rw82METs/WIt6iLg9gjZCbUEPaeKEwebRowwv1VKjrvB6ub2C3T\nEia2uF7/3IbArDEqVWAZPhazJMXOi4A6Ph3H0WD5UfFyQ1ZJ/e1O8b8ORqRF\n2EoDEtJUg42sAnefu9TfmEC6/8aomstKLE41MdzKfp75Bca2G8e7K73BtliR\n5HGrcfu0hIhZQlzGv6JPWYg1TjyxxBRkXVED10/VE7vQgjlHdtBfgHgwNWlw\ncjzVYX1ZhpH8f+yQ6zxxUu/N/vqeSNLI+5dSmXgXd3YTZz2J3or7uY7+4x2s\nGth8\r\n=W3QP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQCc6lAwwq3C/97zIz5nqwtqV3I1ryrZHUHQ2Jo//gxgIhALtZzY+ISB7xookv7FQDttHayc4loRz/LqF5sJAoLYNp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.17d33745.0_1590509639729_0.08052584280923902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-ripple":"0.16.0-canary.e8b52f5b.0","@material/switch":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kMsBfV9ReQNi69FioN4ElSBlGPJjD1e3/YK982JqSyu47AbmGyNkuWIN6FLSwE+LtM3s0eXfwDuyq70PYDT6Ew==","shasum":"69b17924e209ec9c14fc4084927a69a06bab73c7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMwCRA9TVsSAnZWagAA4ToP/1IcgpBH2Auy45BuVoTt\nAnVVsw+78wwvBzvPAqxsFMJGuZRXjtcLvuHxFIAvp1wDUxe69uYlgej/8SW3\nzRV3qvMNfSgT4RURPAOrPC18V3NF2tHK6Ag6dM8qDy35FbEtc6pL9+JSYKfV\n3pS4nBEHLMQ/SYAy7VstSVB24zuiks3LVo4sGdr7Thq8dALkGg67I1eHfDm1\nc4RRpamhu/CRo9kpktJcdQyKuF0urxDQO8KcAvfzhfLT5CVKthnGWdhW8yeb\nXuVYHgyONRhaXo3R7J8jpgF0VqgmsQsEmyHS5s8iy3XI8bFxjRC9lqMpALGr\nYBdmVfoyOrkQNfLlWt84s7qt3VVk5jymCJN3s65po2N+onuYXz88jem57MzO\ni144064K2rQAnK+xC2DIlCyNdqPDxea1o0jZHjd0MJmsuBmOUL7wSvFYVcwA\nrbPLaG3GMTHoHbK+qax+y4yHDX2zjlWvkH4hVEUX6Ff8CzMPC2iV48UCJfyJ\nZaZwOXSOVAqkM5nq4Po/25VB991N6yxR8YcWLciU50Km4ELePq9VzW39OVxc\ntEGOD42m/jDARe1hF+K5UotaDg9Wh4VAGwFwRxa/DU+hDjQYVPYKEuyq9NsO\nnsGMh93h6H3rtqhEuTwN1GAUHo7mYDwfrL1kQnb1p/wCxsxjqUlHtow5o8BN\n8Vpf\r\n=IjEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8+ZiHEQHwfs3YBMqtr6gZuoY3Bd8WT5EcGvQdQ4OxBAiEAvz39rDEFrHQnRmEWDnPk83Jug0ECepcKeDDXO3RVKYI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.e8b52f5b.0_1590518576039_0.3409217276927268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-ripple":"0.16.0-canary.09afa0a9.0","@material/switch":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RC+QyUiBu5/ug/1dpc6u4rBHn9SHPigRp/LMqhfyQCtyzUsUD+KhL7zRLom8cpG7s94r3j/dWsRYN/grXHvYJQ==","shasum":"033e4e78242b6af8989222f0c7ab2713b6d4ed09","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2xCRA9TVsSAnZWagAA4nIP/RBsnQghvJwiTWoC0C9J\nuPIV1i38iFlZfhna525GRRtsxzS4YiiRQfJ20VH//y5N33FzIQ7dX3k57UNO\nhYhmwI/znsxYDumz842Y9E4YKllSB3o9SSx3oIaQvQhSb4QY/SwMvL/z7bfI\nloQzBdFwPJbz4y/WPRR/3q0oSLB1s2DV44ygUUQYllPi2L5+ie14PTcZ3EsS\ncGzg7ALFlIQqUW8D159wwpoeNx3TzkfcBjIhYkue5YY97EmJuULx4gxQoukV\n8M2beoTuGMXC9CAt+TDrHbmlC9jMHmo3OOpkPg5BloBILg2d+DmJklg6mv+M\nJTP/AvT3xkdUrxVWj/qbwYEi+rH19KOyrH1nApxnsPayxPWup+l0qngjgrr0\nKrH8R50e5lvvqziSRqGSJdcXmyehmWvjSarpyx6c7rLMiZPljjyqf2xb1Vmz\ncOhGxfHKGkUroNONPBtKOJz0aZedgGDqNW7JCpI1d8boGxSvDrLL64NVHN0z\n7VMA+JalghpmUCbtUsICtTJ53C/zeb6tM9CZe+3C2cWJTsQIW6rLJPgkhs5j\nvLke12FL9cpRViLI8jBgmGeYrXLEXKPQ4L3YYGywqfP2Cj/P92FGdgyY3Bz9\na9wCulYPXSpK44j1nGHtkbn+MmJ98hu+hLWKIavsMU2DS8IieAPKtsn/+Ymo\nlI8f\r\n=Dm7g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEigLjHXbr7j29fWgfZqpYOYT2JgsbyUHzreto2AevGtAiBfrX+mkTppg8QQxB7R4VheSUhskKG7gsLU9vkz95CVow=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.09afa0a9.0_1590529457156_0.9715883566766255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-ripple":"0.16.0-canary.58bc9166.0","@material/switch":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7QrzfebBOkchZ47yxwjSs0Esw8ZGIzRA+b2u2NvWfpvUVfC75r1JjDv5lSuymdvgXyBZVZY/GSNrSJBrcFtWbw==","shasum":"4862ae98028e5b033dc8fda89d31484ef48367d9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSmCRA9TVsSAnZWagAAAVgP/3D1nC8miGjpmdCe/2u8\nW+7ZUb2lw1mK+W9++n0s2NW0FdlJvQ4KW/3pAafP9IUYLXmIz91MXm3QSx5f\n6OH9u4zuajyS3CLGjxLZhtM4TMXAyPA7phl+cIvzvtG6iTtkHvrWvD/QV3yF\nFJ7Y9qpzZ0nNjORh+xk0w/y2MjGobH0I/aAvaVZde2YDFfZyKY7FUw+o8Spe\nzbTYdWkkzv1W9dv6NEjlTT5gezBD5Rob7IhD6BjQGmKBjj4kEf94PVrW6IH7\nKRkUwO4326SWjXtpYZKp5oHwe/NzWwxw2OhYhvMUlMZUVW+juiN3rjK7zrZH\nCovWDZ6S/cnBcNzQixaT7KsdfEweav70Yt9k+PjmBma7syj8ShC1rD+x9H6i\nxGivnLonKBYm2C9dqGn/atP+BGRVKRmpg1XaBKmHdxSH8D0hYNU0NjbV7XWr\n8QI5tt2ALVBYJapJgg9qYTpJlTv1iWkogOgw5pnNmtS19oIrTqr75XGpaOi8\ncHw8ApaPSES0UbT3KRGncA4r3BP/RmElFA+lPHQbJ4egwblG/0xHTrDm9K/q\nOl994exotgc0dw6eso+DJxWZnnCohwYzgZWI+kTfUGzTkgMa9LCKhm1Zz23y\nD/5XgKrRyqvAIplj46e7sSmD6ZOmeinDcq8IPcUltyP6ZIerCJBTvXkabB/L\noDSS\r\n=3rLD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCb0pa7xMKi4cyc2e0EXdfTe2r1YDrE/cC8GsfBxr8M7QIhAKxB3VbLDIB2PArUG0RBctMr4YCHUACVZPL6Pr407YfP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.58bc9166.0_1590539430198_0.1348902161006651"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-ripple":"0.16.0-canary.43bde144.0","@material/switch":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-b5mmcNmaVOQQ2Lob/rr4ElZhZxdaYKtbf0Vu37TYNNLJgVE80/JZ3EXQOvvoQdbH2RbOOkY3U0AEw+Tgxcw5vQ==","shasum":"dc9b96bde1ef3cb0958e7d6e0df65fdb8a051dd1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGGCRA9TVsSAnZWagAA2NQP/1OPohZNb2zlPK9XaU+V\nTNLvTaFSwSqHklIMxrY7CxUXXkRuQCjgIrBXp9JQwN06dCjLvMoi9nzVx7V/\nChTdmR2dtZTF1rYforerLWsdeFuoLx+iKWr8lUYTJpnE74KbxKn0SVGmo3KW\nSN/cIy7vdDZxzjnMVeiNCMixp3eNMlkh2SH/4u0uev/6qwIasjwfTrQkelBy\nmMq3hPJnjBAxX9+w3P5AyVK8cYi3c0jEqPCsA2u+QxCYvpCSD2Jp0RddUhkC\nKbuWdoie9S/fZjlunJLARlFQHKabuKYVzugFt9rzWRZ9aIMEGykNzo0XHWhl\nxCXbQ0KjNagpek+7I5cMvoL4Ti7xW/qwFekNfUymnOc3+08rSTy5pidg5dNw\nmR8FeKneKKK5C9J5XTxUytnB+X9uYg/lyQdKS91H5rFEoBd9wNYIDwFAGAtw\nbi/L/jlNJl/6dpMGP8hIiVDxXYyX86h++SqhJQgxf+qd5rrhIGRJQQ80sV4N\nRcA1glBT75k/ADRSDGPSAvyIQ9OsJE0vJPxZMN2tF0Vr9S/z1CUtpqeQjoEq\ndDSQLSXMN22uTF2uQOVENzUJcZt8p+epy68U7POFYqtBtzTCDshV3b3v9K4A\nlTql3tmy7iXB7n1KLxmZ1FkMwTDF76H0HW44EiyQSxmo4lA7VWGYdTXYDUsx\nYj0S\r\n=H/K5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5wnJeSX1kDqn25tptr829tU42lSTlpZ5jr8i3GKhf9QIgX2vZy+x3+/3Wll65mOJPyzDChYeyUx/hlp+1honkzPs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.43bde144.0_1590604165943_0.9003933407680784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-ripple":"0.16.0-canary.51067bbc.0","@material/switch":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0LkHH/5Rg9uIrppKHh2c9vzlwAji2+kJyFYF1Yep7hymVwHoowNV8D2KGdZbKtrbIOv82cgwb1H770CAgKv0+A==","shasum":"9b808a53812d2e6e1947b58fc36e061b69cf64e0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseJCRA9TVsSAnZWagAAgvcP/ApmXwvmAfi4fwBuTVBZ\nIvwHt3yNzvPnfTHl6bvvsrN0WkejOFUWNOlVu/O2O6DB9oKRQ9vVCLu1rxZE\n0A8LXZbDSsbzEzLDRNgBBdd/sENyx1F/OMQH+Laf+HXOWyh6tJPRt/EhRZ4R\n2vatWOCAmoMO+iqIaW2RhlZ+Jpq1zuCxwg2dlo2fGUL05DPpk+9BBwvrdKUb\nmjKJhDWgdidu7DREBs0AEuD0JbjcmKTpsepcl09rO9Hz6FZrkpw63m8khV1J\nz6BLz7qkhjoyGOsjfGuAIYfTgHZ8Kve/9q+KtvwO389yzWB/tcynYAZqlgqt\nTw+9TtFJDYtPWr+nMf/nEuRMWXA3dBsUTBMekr2Z+wuhKLoZG6cz1qOvfUNK\nGPpDZjLeyf1cdhwzRSWolC+6Bewkl3RSJsZAjL8FGgJCX/giAiV/ttCHq0Do\nOBLoK4EwQt2q7Lpvxq3jYP9/sPyxlIAEdP2MSuHqRGXmB/yB263r0wqkhvby\nSW2N8ABeu/TjtPwxbY6v7F5Ss+VfhNlBYyczz8PFP+fI3lK0cVZH4qjV6efx\nnrv/MjJVULBwx6yHkc7u5e1yEjRlvu3gDh6SQCjnpQ89uE91nQ7Zco2xtR3L\nR4irYksti5ZI6AIQTAUZeU99QvBOqohByQlig9B7pvKX/T94cLma2JUUPoUu\n/bt4\r\n=gaDF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqR3ZAOOFwTBs3A6j3vHWGIKZNmQJlTQcjDEgwc5iYXgIgaNXMCUwADf4Cf7h8ZFbsX8q6VjBM6Ty3+roXRbhyAE0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.51067bbc.0_1590609801516_0.12875748189648362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-ripple":"0.16.0-canary.92751ffa.0","@material/switch":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/mc+Z8OrFb2DbQt+AR5LivQjBAuai/yWeT1xCfpSQg1mCclYZz2Atl2kEUZwwP5GTk5D/MNroBMGdN0ZGGUkUw==","shasum":"0e8f1a69f5e892855bcfa077578f7f4bb7cd761c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1oCRA9TVsSAnZWagAAMyUP/jFQEQJa2hIwoihHpkEK\nkr1Vyd6/Wk7wbslsFouAZg1kLf2esM2Huw0Rbt3cD8rgCaYHuTyu2vIK3wVr\nCz2APKxY8B/wFOP1gdsXZNs2mpehVui64hl2lPTrHLbpE/fkI9y4NFN3GucS\nSKRe3TJelUv/l+i6emqy8ToBcaTFiyiynY6GZuYs5oyqltaS7ufVqLA4FhJg\n3Dw+M4hDsUQBEiA3NjCnIcPtVk3VIijx6XJsK3CAMWARE9xiwzh7DSamZp95\n4yM0okp1YCBUirCtCe+YvzmxNfpnAwfRrI9iKVUpLb7bqgM6BooKoxEtX0SR\nkn93qbBsR4qoMI3Ikr4NWdzLI3zp1LA3csSn5uqTAMQdQNJ0QVNODd+N70nc\nan9emoQ0r1Cp9aGvZMt/UHpC0DyJyeyMP7mQ4RK3qPbghUjuz0WgcMyJBlFt\nNfZ8/bEg/4s3ptvX/MNNhA55EGEE+EKLKkfQCiLTPCajb7qf/B66PFOqob5P\nJo75EDMUVKUz99a4duvRnCRq+m7FyZ6GU+n4H9CkJjfFx6184Q01LwICvPxc\nTbol+OutzV7uL1HDUkvExBG9vA0ajp4QPhoulk1tJz59qCTfUQki6D9cx0kR\nrf6A7CyU3INjyufDGF2T+8SFQqCJ6e6p7wHBZo2pWz1Xh5Bl7WGz2iSiSvJ6\n0QUS\r\n=9NDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFufIgwQsfWTMlYzEyDMNpIsSxy7lN28pbI1SoYcQURvAiBI25s3Qth7WcrIFc2YDSxn95hyaUXUiRGihAFulW/rTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.92751ffa.0_1590615400169_0.8744408210644221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-ripple":"0.16.0-canary.aa2b40bb.0","@material/switch":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YIp2sadBrxaxBu2n3ahXyaXT/7Gu5ESsEs0/h7/JOH+c7VUQXeidzVP9G2/1vwbhpBBKl6gSS10KKwJTIv44iA==","shasum":"e524a26aff49045c822881daf4f306314eb6d22a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2/CRA9TVsSAnZWagAADx8P/RVE7TLL9qTQOzNJbpWT\nJ+eXdbEYodzERqkU67aA8Jn1qUP7rlfFBVUVq4Nli/QN0FNSgcUdSBHtuL7h\nbetWtJEn7EH5ltTGvqdJlI5xdX4wB6jt7NPyLHT6RW8lA7kDSUPIgcMw93Aa\nskznPfCqPRm24mlhJhtuxVZPN+vSM/w+2ddnBUgWKq6Irq2sDXWmUyhw6Cw5\n9w9jQRjikjJBdVF+QzT23s3TA2+9dY893nh37IK1a8mE0+r8iN9ymfcS5Tbt\n6mkHnVS4W/bel9MIvdkK/I6w6NUCYs6sjXn8OyYsk/TV0Zo/30CKHl1byN5Z\nzYDGSqNbCje5UI5TNZlAf55m5H5+nEulunOLP47NhjCvkGaZadLM8Yv4+FIw\nhFkT5Jus496oUG3ytPWpqGyG5tW9+Uybjj8xbAsK3xXPg7EP1bsC8S1Y/R34\n2p08Vp3tOofAAcA8/D90YTare6fVjRo0MLd9DMSXJPATq4RproMsY/9POHpc\nHi804R4IR0elPgcEXSwO4Q1jnE3YlgPDYjfWOWWl8euR6u6OiOFORm3yPpAW\nf1VShBMQdhOESDA4k4FkBOPJK3eRWOpC4o6IY3BE+kU0bMrCv5mEIw+xhMR4\nqRt/giKJS2gOm7w7x58gwtHoX0tfRrI/ETymbIzuIL0W7uWmu7oXLqYndnyT\nJlCV\r\n=S1t1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyBq2r80PthIeuKQRFjEEkXgR296SLGaBVQJ/p5npYngIhAIbTsUSpPSutJPVo8OXFP+KMWrhp7qv8iJr35MDFu3CI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.aa2b40bb.0_1590693310724_0.17500651893828545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-ripple":"0.16.0-canary.1a870a01.0","@material/switch":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2g5cnLK2FvoTeiaUIvOjWIasdfrqLLxIhJqDPY7ch5h9NGeytrt9lczOGdDn9ILCVXh8ezFbL3Mka8vZtSzu6Q==","shasum":"ffefc0e6faf13920b3da322f55fd48a8cfb4d876","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Cq3CRA9TVsSAnZWagAAoWMP/0FZwIMwIPHbAfv3ycaL\nRGE1NTltPzwoFp0PFnbtZRX6MBG7xPi4eJgXU/HDatIotfwoIclx5fzGDCRm\nenYi0eaufDFPana/Iou+4NEQLpaHbX+C5d7mBDzTft9D5hHUUdiNanFH7tZG\ngS8PZhqqdJ8JLX9vu9dIzGJ+uVA2DfBGJo8q5rVQ8zWCn2m4Ih5xdrI2M4RQ\nmIAyVznhtF89Bpmi4LdnAQnHp+gjfpuI0vGXY64ne1pg4lCOS99W06VcP9uA\n0aSEi/+ywlC8vG5k5VedQ7Tj8Kp+zZ4gmmfq80355UIOvnSjtxJ1qCKFUw5x\no3J0AxPlsLJ9u/LU9LleZbjtaMPRcfnFZPTQYr3bbulT62PrHzLVCHZm7tJI\nUaSxcKUTnqwxFao3GdZAoShOsukzUHCcHzrHRLU/eNon7xMYOPSjLVPWCqbJ\nTMAYl0eSh0OuwyW2U80X5kfoGXuesPbtNASfCUWY9ebK3FMIV8K/iYenpEah\nF82TMZ08UyZTk+U3OpVF72B+8u60b+XNVNywbqi/EojukmDIM4I0njDbOlDm\niqmq4YCEdEIa4wiRYHO81s1bjFQvGnVQtpHXOK3k6Bz30mcKJX8/jdzE2DTd\nPIa5oou72S3QtwrRUy89e9GRpwQm11i379C4yJ3QhduL+4XGjRs+S8S3sPcl\nBhP9\r\n=u7Hf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQoShK+0eC5cVmW0iI0MVtDzaOsnKs1iTTEZEx1M64mAiAqFC3p0aXZpAul/4ncDg65A7Bd1uRdHdcGZ0sciAMkcw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.1a870a01.0_1590700726651_0.10365086008842961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-ripple":"0.16.0-canary.ad57d086.0","@material/switch":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-t1Y90Hc1SfH8mD6aTZf1ecx1yY+n/Kxttcb5hJ4itj4yTPxkvaWYkKf2m8a2AT7EZ0UKqKXYUt/RdPczHLd/sA==","shasum":"555d2f9afdc804b4af7156ff270f0b8eb441383e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z+CCRA9TVsSAnZWagAAo7wP/i/0tKjN0pAxDesYLmDc\nlCoiIyHwH9WDFSWJCPrq/810YIA8y2J44m9rikZH6hs98ry3EdvHJ/kFoS5+\nIzYzAdLXW8yxGjmRg2/AItO6WYY1jxvy2Rj1NPLaDaPs1FzwlcfBF33V7cGf\nj2qr6bbgRGU1s0NR/gbj/UV6fflpncXFz9rk37HErXovyIM+KJjMXn5nO75w\nTmYoeAknhZaJuyeXCiLmSZ1r49nfvXHQinDfnIjDWGU3Y42qOZUeZA9gQpeQ\nJOavHVdH9zAqLznvRXGAotayP0l8xy4BO+IgaOw52MCWos0eh/u6i6E1iGAo\nPBtzutfv46nSm1GrXs7nsiyLVmsLk2LTiBOwEeuz6CYVKyMyb2GNbq2S0Zra\nsSH9aUrIxpjqXYfTYE9ZUpDCH4N4SAA7gCrB3ooBBybM6m76UBQVSYEWGe9n\nKgUA7AAnMfE3ux+Ahlhz/J9ATqs9oDmv87ahnuGtk8jz/YJqC6UifYOK0UH3\nrU1soOGKHq7s+j78X66dcYGsk6BwyXFzOJKPKdLxthuJ6RyBDdjhyF53Bf62\nIdu80KyUlVhOxxJz3AYDBrCYdbks8WInTrRVsZ5v6WQAfTmo+lbeQenl6Fke\nVBFxaXGSos2WJDpAg1sSbWxEXXMClOR4J1h5dPr3fC+5/vihnwk4uMYUeJyz\nCNjE\r\n=sPPW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0B8SiAJTpjIh5w3lyqowmDbEg79pbCGWDA6KdvhFM/wIgHdB3q8pSOhiTOl8CE5sDQqW+HsTn8fYws0v4R1HuYac="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.ad57d086.0_1590796161707_0.5858758559021999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-ripple":"0.16.0-canary.3bf2b4d5.0","@material/switch":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2P9rcm8179sOMGSexoUN8Sc5H6So7i67xTC1fnMI0Bv6GTfVE475HliZoGbS7P4aTKo6ZfLSnjPPg61geB5CaA==","shasum":"83d99d55688b9bb9cc21312f6c16395e84190ab2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqkCRA9TVsSAnZWagAAHU8P/0YE64sjSWGI2BKdAlZS\n1tuNArCLRfgvBxzDNVX+Co/II4lfNdY/pA7rnzglajVP5s/4bI1LL30rRDKB\nHU3sQ3Rn+56ZMoLzE+L7YrEYoQMT1PyngEfLpwUoYm+jaYqCcEhlW5rOoNUW\n6khUGtQHUEdFIFnYbXHq0KO7gzTFIjBe0ePBchXsTTBFc5bbmzmrFqyKpKB6\nKaengjDS+M7DwVJ7AAsxzeje0O73UNgFX1XsPf2sWKvzVY78do29t6peIFO/\nXv4ikUsdX2QV1hqbV6Pl23hkZ34Mr0DGgZnFkyPjf2VQ8WCtZnFpLPrD7H31\nq8Y52Pc+Oxj0JQOz21glKkTIostLWijvKSMQHeNdAwCrPTzOYVgMy2+g20t3\nvUoNReZKLqam+AJcU67BlMJSN2Ib4/U8r4M2nlWrfEMh31nGourqPT24rNZq\nXGE52VhsQFEIffh9oSFJZq4wGFCfZjCtLvh7WEwkB+DtamEDYW3o97uiVc0r\n3uVMXtJEv6c2T1hNPKvdLloalkbwjr6AlUO2cBEFxNc31pVQKJ21ZBLQjEU1\nfNIhl9QvqXcyHqAnNYm2bRNE+4HxPLALef41bCPSIkiKEBXJv3zztBpUZjJL\nbkcHVuqBQSMlUNGx7EoievoO7ffx2f+oZyI+un/QG+A2D3hjREe2kINVDwRv\nw2Ys\r\n=vFfB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACKXGxZq9MGatJHE+HNo5zmyofAg0vF82bhx1TkLayzAiAYzCgtcltID/Sh2rRB1OVTgj6uTtiVqZ2vXcsCN59F3Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.3bf2b4d5.0_1590799012398_0.7303063439289417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-ripple":"0.16.0-canary.ac05f090.0","@material/switch":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ycyuq+q4qucr38jJeuDLYA1mf2T8p5FVihDd5oLBkURRGLNzCMFiU7QRHflNsNdatlRav9KDDEysNLo4HH075A==","shasum":"ebf5ef85d7a27745ed4878e333afa5effbee7fb7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnVCRA9TVsSAnZWagAAV08QAJi8adk7sGA9JWzww+op\nYBxbu18DfCYw6QNSQHQVwA8BOFRIIrt6Da1UYnIh5pN3BnkGZc3Hwa919nk9\nNSHdOSc2B0g/1/HdKQ5Agi1T1RnKPO13KWV66NPf15vZiCUiuU8DkYC3o51M\nfeONLNPgEAA/HHe/+OCjMB1sh2DgFtsLsRf8lhNee66rQZeRLrNB2xbk744C\nlnxQe+gC6ux6ZawZ+myceyeIGtADJd7cw139eumCN6xNGUZPs+A53OBKJRuf\nbw39MQpKFIUH0QV2sBbOpEcalPWQ5dkQ5uQtic/LoVMBgLmXUjzfLBWaDmA0\ntGObwmAejPa1lSkHajldkOdx4G/C/kWRXLbO47wbUsqT2M3RpGoed7Lmelga\noBroEEhEpA2tyHp6DVDaT6wiwO/mvm+c2QWGl2wfeekUCFTkSvkmLZhKSZ9M\npVxAMdH2y+EVkkyeUOoIOmQUtZj5EZDG47DikIl+R889fYyJeWgn4L0Z6fSe\n05XBebir6XGXINhukDzwfMgOB0wmYBC40UuSs+IzyW5BlqCCiRcfFLOLDRmw\nvm9LP54zQQ/J46njLKCvDqLAKmbdEjz2YbjfGYUEteLvWM9JX7jlqNZE+uBU\n1f2oFoo+O6nPIrQ0GiNN/a+fu39X4/4Khl+AUPXQ1PSSqzY2kVDa3GF2X6LX\nWDUm\r\n=LgNs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfGZ5Q6y0AOwh0dup9PSayZmcTSXmpKrp01ZxWj11yvAiBKyZ+6yyHuJ5XWTzzYc+g0k5HZes6Q3Sg97E0NYkJCTw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.ac05f090.0_1590806997360_0.9868352949826662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-ripple":"0.16.0-canary.0ba7b095.0","@material/switch":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RuvJbQ8n+k2PmA1fMHRZsgyrizCBE7u7olS+voeI8afbMBDgtt3B3dsywAoOEyXu62tJAdVzvIfMq3eIOWlkNA==","shasum":"c5b5251855a438eb9409940aa6aa6e2d1d665508","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctoCRA9TVsSAnZWagAAMwIQAIb6mY3HILmDT4H9uCXY\n8o9qTkUuznxHQQiBVrKEUNLXPqHSaQHkXqdr5UYzmOJC1i7fYIyDOnTMWThV\nd1ucLWZFxaSMt7ZZSXTvz1rc7c+dZfvJyhASB4hArtwrrXmSbbeo3Dl8QZlM\nbAVgF77gPxxXHisxXJGEE7uHz5bmTsAKHDH80+ifLY15cYXjQGvjqr+UvUBT\nRE2grZZ+iJyXw9tIZo8LPlOd2YESivcWXIU716MQ2jGk30P0U87fhmeDRq2r\nCCPY6WfAy0sBCiQ0gOpLGiA41zm8E7xs5vIE4goP1/HcPJ+SqWbr7kRixVR3\ndAT3/RzEpkHjaT4lksFI8HJV0X90a83TGzMlIVrIGbfPRo5S3zPaL8TJEjiV\nMKhz3VR8cvWhMaWrvPpL82isAY+cz9vmcvjxNllxMDWTQX4KoK842BntN/S4\nLhAIKSg1BtKr0XrB61b7fcP1S69MemscaZ4xQ3aqRcleQPAzeBr2nLmSTgVq\nD2CA3pZox4D8b0yYrYK3SC3czqgQ68IrWxwR4BWdpQSsTidhcteiW48I9IYG\n7NR48yxPYW0A3X8zCfJZNUarIciBzFLupSXcERbswBnSfA5znbHFBkvJONNh\nEVFq7UXVLwEVc8ISKQndgI04iPVxfpRlw0FrJhkFIFrb73kZBPgxWh75Wbqx\nzaTq\r\n=I96C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmRfyX+kTRaBieTEMQGZLNbt+07Lh+NP2TjuWpjeJpUgIgMFwC6F3VUkh9GqLt8X5mFPkZmafwK6Vp7cnQudenA3g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.0ba7b095.0_1590807400493_0.8417926673893836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-ripple":"0.16.0-canary.5eaa9bac.0","@material/switch":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p3Klti+oXBqvoyUn8PJUcIBUfq49C6mIm439MmVEyt2qnVxLQiMy8N48vcIWLB8tXDVWVGZIcIQeDuE+n2J+Qg==","shasum":"db99913a7b30ed2eb483a4ce0f4ce7b6592a060b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":55457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y88CRA9TVsSAnZWagAAS0oP/1Su+JnsV4do/GBnSZPO\nEWSu17ge0pDbp6UHXZo5OmOHzsB8+LnX+424amLHxWyhSR9rJ1Q622LAC5lv\nrmBFhYWJn5tvWH4KfqvPkJs0a0SR7qABBk6BbMa8rmS5D4lTkXxaaypxEKUF\nZoen68NqXb4BeVoURTJzSAXxwD88dwKW046H0WjmBtcqj0UOcXM+WmYIRgYb\njU/MY8RqkW/6bNL1uSxSbO3CjSZp76+mpcyxzenEA2U4ve1MH1Th/G21k3bU\nGRhmmPmDZXaflBztqKvUGBxwM1kJr92Y2dntqnTiuKly8SmtdX1FkbWOlqgH\nfw7UtmA07hc6Lnd4Af0P90YXtWOBMR7AKO4zUiBHqkXKHk7QLlEanr84Km82\njx7E55/dy1h8SHefoC4qp5A4f9/if7jgGG08/gSeH2DLRWbL+4asNzjXqNcr\n9GCnCOhfmqrtnaY9Opk1puAOUadd8Zw4Q9dtQJbpuVc4DqHh1fU1pLFFrSl6\nSZGAPd5PP8JLK2fxHV/ciUc7SxIlXYBpx6wQ6qXRAdrKt86LK6Gei12BVkzt\nX6W/Bpk//wJ2147WG36Ua7ENo6SvAsWTkXHRlx289Ycn7mZbgF0uPBi0zU9I\ndxz3Zeq7m3OcjA1/JrBaabc8V0UHbc46UKkzNGmacBuhWQxfkyRzIemD+39o\ngqYd\r\n=JuYn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJnm9bIu9klDLZryqJohipWdzTkAazEJcBRrAMGpk/5AiEAztYozJIaKxdzpJS4lrCr9hTABhHecoD+YgJgtXmv/SA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.5eaa9bac.0_1591054139641_0.9714169787228173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.5677ac20.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-ripple":"0.16.0-canary.5677ac20.0","@material/switch":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+e7VDQdtjbTo5W+Q1RfhdjM9Unxb54AP/rhQiSEXQ5lV1s8uFg89H/OBRU46Qq9bk50I8igUXS48Ef5dneqMIw==","shasum":"740e59b6211b2b55f72b6f924117e8d031e6aafe","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXkCRA9TVsSAnZWagAAxrkP/jh2+GXTulrmRav61/UF\nDZEwv9T5OO8HQdKwcC7mw4LmVSy/BdEzsXGaEfmZt8OXVaZKWgYo/zMFjoRC\ncXuziZjGDHnjovP9mFNK+M0c8+pjFxXGylrbO9ep1qq5UrxjKD5wuHcnUbI1\nafW6pEixczzUXoGw8anXNOam10cunTswep+GHyRrc3UnEZsljq6ToblltqZe\nZdlrtbCeQGgy33R+wucEOUVvPl03qJi3/10E7QVfXgzM/xY7jp/kVda/07V0\nEZCYpk0YOWQ9TOMQCKp3OzKIxOKAcF+2mLYdckNlLz02gU7PPoBMdapHZ3ZY\nw/6Jk24BslFuyrTg0jef7IVS7fbiH5UY/CR0zH4DMG0dduIrcWIcWnyIzhua\ntLd6jZucAZWz6xOUZP9t/nTgamEjBxUreIHkTaLUNxKPaZMCCvzvLw25sBfc\n6/ci1bS795hzLQk7wiasm3vF8JsO5QEC0f5DRPz7oXvLOFTEjqaYFWUHcpMF\ns0l10U65a9OxGqzP63tUvA+Hp4mwBsXW4tzNmS8cGkn6d0Zs2VdCZG4BGC5a\nf2BYx2+gnt6ISJJWiCuRbUmBkiZ2+LsOeHlzKCcDqCxDrltEF/3NDYrnAUlh\nakfNdPNTOcGznxxUDQL5hQ/0dtl/9uEnQwpel3fx9SIDAowKKN0jlLz3Osez\n0xTx\r\n=WfY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsKZmqnSWkFIpMz203SOSNrWBJNC85Yzy24Ag/qPwCGAiEA/wjih7yfQhTPImunIYCdwpXzOtkky4oxmfgN2laE6gc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.5677ac20.0_1591055844197_0.11089651377913334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-ripple":"0.16.0-canary.7ac6bff4.0","@material/switch":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-moXEG63Pl1fY6ZAIGwOm3QD1rKgVy6MnGA/c44etA/Qx7yDl1c3FsYFY+Wb6q9uBWu9ApmkFVRKjEzFaZpt+oQ==","shasum":"ce2db51cf9221afdd22b6261efe0a1514ea693c7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Zo1CRA9TVsSAnZWagAAIQ4P/34KpoReCW/iXJXPLUR0\nWS4imF8IKcZDlQOKmsPAxzfXB7cZ3FoHdR44lgjZ7NTjrGtWbciFALq9zQaj\noCUG6RUq1TKBAxFIDontoR8arWwfJej9YlfOtwZiVsmkWGgdx/utW/HV8Js4\npVC0GrBGxJA1udN4rDEDTX6wAm7iKcgWxNTat5mGiJpVakWXyMhzV7pJ3mBa\nNPNHM2tbV5Wfh1yzSNgqaK6U1Jiz0q5di/eYHMbsz6q0keB7xBFLk528Avkj\nGSIMjMlOkoa6nZMAFthQHVZzQ6TlVB5DPh9BMBn6ee504lbPSiSdcWcpaKea\nk4+0JMXnDSXaJKBOO/I8GLUmAOOvJmpG9e47b0lh98ES+Fay/XiRXwu22akn\nwrzNuklzdeaS9zot3gzR6yXbPpAENAESJkhfZWcwSOpyvedGMb1ZGx5/iLT5\nXjeL9rT1tPsvDX33gl6j0Hh3U4Ls/RXSfGIShoTIAum58dtCaAGg0dnbtyPi\nr85Xkl2d3aL2RsGNINEUeI1x30fTn3JlC5nTuiq/fnzAijJSoFFlMi9mGdxK\n2BGJxl0ccCyFPmjmhyzrqKDxRmmpSEYEzyM32kKSdePz02CzPn072uqe/N2t\nzCWmrbGb3MVHxir6Bo8s9hhURH5ZsXYazQ+c4keFTkFWQaGsz44bwUOu3E/g\nfIgI\r\n=FHCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+ZrR3EKxjzwFumeIHgUvcz1FvBF6t7PM/tChFhbtrAwIgWa32/IrCtyBHAP46Gj1X7+1SihWzwx6+/i14PPX+rpA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.7ac6bff4.0_1591056949410_0.39354073487955366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.d45622aa.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-ripple":"0.16.0-canary.d45622aa.0","@material/switch":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CG037bZxOlt7DAJsgz3u91pz59vFs+nNCNmMidBe9HsrVywzKr3C+xDmBl3zex0jHvaJjleQ6fCi/PzL/15f2Q==","shasum":"7c1d663fe852c0989a323936dd63de3eb2a3d442","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uS3CRA9TVsSAnZWagAA8vgP/3pdJzFijaMCX9vjFVoc\ncUOZjRkvBvzPqI18x5ed+2t7tUU87Ldt3FNDCdo2IF6FGnZUA2iP/1Z2lkcW\njN46aY4oeZiBpFyjainrXjj3vp4Cruy+88+fb+ckogMkwJBxS7YSKd3KtuWg\nDUnK0AINyW+cNJmugnxuJqSZnLzc5/cJO09+9FoZpYFlt/eCbLz80+Z7CTtT\nY0HfjWZZXoPspku5yZA3a8eLF5VntHALr11a3bCB7YMJAo3v8RtAp8jbKmzJ\nd6D/AoV+m0wX9f9P1k0i44hnDcrg/7bnIRanw665cB96tchsXe7dOkzuWR8O\noh5gaLM1HC3jXVnkRaGkJMYwDXk8aPq0nhsMs/WH2xozW6z420jGErIvBWRt\nJQv4kcBafJZ2uZd5rF0wcjLukVo2/O/gMuu493kVtPa2l7wA0DeTzWc2l5My\ni0cdi2KOK7Kku+LPH27KhtZ0BHed6GGRhEtofa3Laz3k4D6b4tpiKQPggema\nHnW0ydT5aWDBEum1tNlBrAlpmVKPYiw0hfDwHkJS5FaGfylZsY9FM+Wkw4kz\n3AAG2Nu4Iy/O2JLsdM0gnEokcb9tT3SgNoCvTCT5/4JWQILCt7TFnQkAv5wt\njyogA8GyyMJ9d/WLvF17BYByXEIL9o5d20UU8HtL9ZrQSSn92SskiEqZYYob\n+xiC\r\n=PbMz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoYmeAq3smkkGaRXO9rGVktc1+bC6wF68GISq2vWBbyQIgTvXNS4+K12ALf1lHxOzNy1Jj9IPHxnFoFVJutfRInC4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.d45622aa.0_1591141558526_0.09144071704698087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.dc26c709.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-ripple":"0.16.0-canary.dc26c709.0","@material/switch":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VV+tkH7r/8MG1xg8sZNqYmyWunjTErTqP9XijvlAE4KK0nzvLAdhavswqSUSkCN9NoEILqfC9FH+NMgyDhFz0w==","shasum":"7084bde11b8cb2364c5d5acf960dfab4c269860f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qk3CRA9TVsSAnZWagAAacUP/0mDm06JB+I+F0F4jCcA\ndtIYRF3pplcx7Iivbv0pXnORPUckylV5Y76Z0yuoXEIVzxpM2+cap5pNGqaF\nm/KpouY1N6qaqIZwsrXZ0CSeHY1TRVW/fMODSg3MqF04qShXGtMDUw1B2apH\nK1u8boTPEZ2C9+qVbNFutX+bP59CxTn6VhMITbRnFvJDxw5rFcNWlPl3w2/J\nGnJJSacGvmdVbUD3kpHaGZ0TbZh/Rg1/kKQK3QlRjpBhE6UqaHWLupYvUSaK\nAQT9UhPpv59WHzmqbhhaz+hGx794MAbe1D72YPKOnxKQhsuiIF6AiqxOwEIg\nKtzYFk9b7cd3nqmrL71MlfqeI9/pJzzpTJs7DvMeP7RoEpjl0zVPFcB8ZFJ1\nQjarvrYIu9XY7K9yft0QlPMUjXokH6FWbGI9QLC2G26odLCDJwO181w8BirR\nqJybMomCTPqpHVUA6IwffdJ4+t0l412TUyLipfe5MjjVSQ8ofDtrkbDMGHmF\nJGZQ+GGJDvG6fvY6iWPgj6Ry0BifWpGZoGSXdBK6X8h12UvnlioW5EsqWXnf\nBH6icj03c1mL+XE7KCLJIV8HFHrq9qDrOpNlNvQwlqW4Enjx4WzMvEdO0PkC\nWbd++v57/ocFboRhaTQ+Zhky7qamGZHWiW/n8obdwHCIHWX1EYTlwLrpakiB\no9mA\r\n=QkGY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTa/+oZLz1kr1mBNza+qdyt+tkCGD5cZm8ArjlbZc2dwIgYCRdYj/OQYTgTRurqVbjudaGd/KNv5q7/v7ve4nS+TI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.dc26c709.0_1591388470822_0.755015158253197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.b9baf6db.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-ripple":"0.16.0-canary.b9baf6db.0","@material/switch":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-35eDpWzsj220XEEz7k22L71ojCLGccmMNprTLTtk+DScYUCQ8PJAUAfHdk6knWfwrwUaPaN5NksVr0jnc9O2OA==","shasum":"1e719dd74d4cb2b6b09b47e221b27646429c4408","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmKCRA9TVsSAnZWagAATAQP/RITvaV+lTmW9r4HFJQ3\nvR3TygROgaqg/O2fd0EA/+yoqVpnxUu1uq+IbME/EDiu76gqAbPccdTB0JQL\nqifkp7bl8EOVwjYVAfXd3w7DYMj2Xel9lBni+PFmldOXwglB+yKZIggWslQM\n7bg4QJsAUtRVPoCPA9lxWZt1Ulp9pw1sQw6YrIqdYdzM17x0Yfyx6j1k9dDh\no8PAaxfY9yBV6ggHzoHQH5Yah4XAheksFGeVmIP4elwit7Amb+TMHwusGilw\n318/7SFTu++2u9LqUWZfgL6DTyPz5lbYsVMGv6KnPQt2aJNA5P8YzJSwbkRa\nqk3PnKQNGCldV+YsZxdvESosvo4QOVZXKwf0AG4yCF7QdYKnBHHy7Q+pcCFc\nJ2VsgERG8sQDbI+r6n7hc0mAEHNJ8aHm+cyRY9zcLx7njPgKghDuuL0wKYtc\nqSWku6j5ZGjFcXrKpPlbHBqUyLHU8akvAc6+dkzLebCtkDswbbbH0JDUZrwF\nYPVnm+C42ptxuzSoGDZ91w07DMXhpzQM2WmdA10QQdC/cya6ffahzn03D2Ij\nxJy8smfxnT4Ds0fp2SfyAzu0/a4fClkATj888sQeA/WVFFg+edan8BnpdoaQ\n5tIoRP3tRzLTWwopC2ujJMqCJPrmghSmA54xsD82S4/4y42s+bfg25Awm5Dj\nZtUm\r\n=RJ3B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7bJjKXoZQZcLqLmg0lYtnig7wt2rjK0ECAMegbrT9ugIhAN/tMjkKrGCTn9vSyx57wSlzBDWmc3Nlldgtg0SjIsMT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.b9baf6db.0_1591388554124_0.350773436176947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-ripple":"0.16.0-canary.e0b8c9d0.0","@material/switch":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HmPQiaZMJOj/4FKXfcZZKXc7gEcLvGLQ0Gw4cvIPC2dLlF5owrhGS8IRkDFpcXOdDdO5ss4rF7ED3LTQuehghA==","shasum":"859b0299f90057f5f340302fdf4a3d690c625a55","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+fCRA9TVsSAnZWagAAKYEP/12M52ipn3RYEVh+zioQ\nen08LlOqK60lFTyOGhCfjPnVEFIr+XI+kjj+a/XXiNfZk1VE4PSJx/pyHkK+\naTu3+qriov2b9dorJPt0qV1Se2mLwCa5UwiIK/uVO8B6NG+4vnU1+Sya9Ne+\nH6VFM7izPsxVz/tTI4gt5jLJKOZeSmQrMZcs7dXZeg+DRP+HS1omUz/lRfe+\nJ5u1YoEy+HbWb/817adNc5eZ/VFhZZs13TWHCEqxR7tENz1E6ugeQstirq3y\niIzdR6K1YAXcs8Kj9uI6QKmjjV7IMcP5wB/VGHblYdvofB/4rmQPNUvi0TCy\ndvb68xyq/Ej7Hjhkoi6ykLLJSPSkCnnN/tuh7mm4No1h6yCSx94t17rpy5yV\no9K5m235PwrWbNo9c1OX6Sjgs9dVF28747S+pEr7FClyjW/j1SAA+tV9X5rZ\nHtSrNqjwmT2XHopcP9sxGn5amTEqFllvvS3DcDwS9uNckqWoNHZdlOvdUUF4\nCeBws0jKnoQFYj6HUjQ/JTRIXSN8hfiy74ekdqOJplcv7Z4/OVtW/9t5YpQ8\nEA5yvKh0TEt6Br0P/nwAo8CwgtuGC4CzDYztSr62q38+VojxNpF/xnfcM5Pi\nP3zudDOzCQZeQHiDH6wUnMcT93t/frikRvPEPGa/Hw6+B8pdagkw1RPXtaV+\nTeXd\r\n=744o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwXufRU2bRtHSobpEcchRAco82Tj2Rtb3Dan+7Du7AjAiB2HGl7+KqIkd2rOTWmp8YnGAsxfyuTlTkaR0YO4Cr3VA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.e0b8c9d0.0_1591398303140_0.42996399596675716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.51552859.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-ripple":"0.16.0-canary.51552859.0","@material/switch":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QTCJ67TViw02RSozCFp3np5AuvRdFxd5eXH9TGABX8aGdefhOhKQDDfxXoFo7kC+ljyh23FPgRWeQbRmaB2grQ==","shasum":"20f1201f2e46acd391e58badc9ef1fc8fe67e0d8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRxCRA9TVsSAnZWagAAlbkP/iQmZQGkudHz4eVcONBQ\nA/GeSmnSdhV0yM9bo1IlFBO6d6nfTSGHmj45jEtMqQOXBaTSrlFwSt0Omp3t\neRa/LxtgUP5E0hhai/95E4Ph72W4UPlpwiOTW/TL8Xvoe0jU8U16UmVWDorW\nadivlH8NNAsKTfQBBFShgfWLlnqizCjTzU+fZV/KwzUtRk5oNMeEYOoV7Gum\nM50V9c5wz8/WaI+HD4SIPRrbL85bJ7nSqWZQjsGbMC/iOH6V3vcqs891Odkb\nEhmEwiPrzbzJCNdH2rGOZYUqkOiQ5nRbh9GD7KRVfySLmHtxOSuAQsBV6AM5\nxmiTI/c0xVv6GxgunsxDGmD6BEyLFdNZ8tZBYknkQDp+2UwOrJicWf/ICX0+\nDMhmUVzQDzDXhl8bs4Hweg04U5MmlUQSGBnmBMFFJl8nLB29N+9pCJy2ycZJ\nk7j6LvF+ZhnbPzt9t9C80m5fTB+2bf61y499lifmuD4WfKbvaRZ2SnhCm4da\njktIw1ybwvaHjugxR7eAsA0dL+8uEmth2kgsr3P0bwt4Bu6ti9gf+u37mhV9\nM7F6kM8vW7uY/xKmPaFmzeB3qzJAywCEnoPBu+I5epXnNR8JMowNSGxqdRyY\n6b9SAEBStRPyAldptFk314kvf3utpoiTf8B54nOLsBCAuGPm0C/qGJ2UzmXB\nbW7n\r\n=T/0M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8GDyXKa42LIWvKj2XyZvDwmbNpd/PIQjftL4pj8x2IAIgH/jwYJCGCW5W0EYFl9Q1w5jP/5q2RMi11r4fTl6iyss="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.51552859.0_1591747697189_0.13280927366136175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.2e269285.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-ripple":"0.16.0-canary.2e269285.0","@material/switch":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1Bx4fdvPuugJTylua+Xv9oaSFgrCQaDBc04SFcK7zTHJyDzyiuXeWPVkkSp9IYm3ByQme0TLmPgDykIOf7UmBg==","shasum":"36ff1440cf1a969205290f5fa1f2c0acf4c4f2f6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Dj5CRA9TVsSAnZWagAAJrYP/1HMuYQ7Ghclu3vRpBNq\nh+4JcuLwv3t4dmbDYhQNKdBx8nYheIWxsY+DmikqZTUA0JhxePpLdUGPhgux\nMV9hS+0VEAe/NICUbM/wQ/ZAyJqZcyt7blylzg1dIoHfukzjxHq40RMF1ptS\nvNrIdNE51rskJZCt2GDdKBy2lVx7hap073XDFQcwxeAR/m0hNKKkEIIxqX75\nvpvA19vjEe9tpjioBx1ZoCT5fT/WaRVxR972rWkVPwqz5Qa0NTRHkSxowiJ9\nDZna77Q+x54aeW0m+yZAWpJilppqe/RFf+2o0sVMaq1TRLcIKURb5N5GSqtL\nUrmaZhjGOMyyUNEw4ngjlY/GZXIUOb1GUQI3G88rdN+w3GOMUr1TOuBBrq3B\nLZu/RzLc60uLoDUTsD1DZFOcyi67xaN9xqsvEyS9OsIOFiA3w1lWzBqa9Lle\nrKkVNw1LDsyCxBwmLT5iPrSSC/PykQEuiQd+OMhwsfTHohpJ9+qjlfTtXNd/\nAdGg+Hh4ofuxoEDKrEDSbP+bgmpP+ddvYvosMsqdzTFac5YUTxEpg+lWfayv\nkM2cVq2VAVFxOzDiptjBSCZTYHPUiseu9cj6YxiH9Uq1Ya0800nmliBw6LcZ\n+4FGKOl32TDQQpUK9nUYToMNIjsgXbIK53ItIMAUuS/XvnsbjECeJcLGSApF\nbbGu\r\n=z5tk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRpPOCIgqHdtG1zugjT9/+FEOS4Rnd+xCG1YVQOR20agIhAPC9T/zCTAHki6fXKKssX+OzN3vrMUVEQ7DGctca84Qt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.2e269285.0_1591752952835_0.38485248341884937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.be138b01.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-ripple":"0.16.0-canary.be138b01.0","@material/switch":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0fpflNQaRhWkowxj1KvUbzOBntp43sTaWw35hkHxUFCWAHb9p23q6XT0TwaxCgYKr+PttFoJzfwJ3r9w8NDW2A==","shasum":"9e9a4d6ebae066f39461739e655b22030bc17bd3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdKCRA9TVsSAnZWagAASZIP/j+/HjjWi1SLoXd0gBOv\nxk9spxxtn+a+Mk8gDo2ZwOUBxWlXvulil4XFkPXH7jtqBFR9hwav1C/H2f2d\nKV4K2LvJouLJJK2TRIuC4vSk+8FPedsZ7GlTbOeaszcQQ5KQ05ymiyoN+jiS\n0qzc5fn4esTqMloJDAi9oCRzyLjVA7mK51LGFu4j1380wsZEGfbvt8oIX6BL\nPZPLzB+wBD8RtGpCrcnIPhc5/yXr/QQhJSkH8X2mYIfB5nQ7Bjmk76cNyPcp\nUmNJ6U1WBUJXGjQkA5TFP0aWzI+odc6HXByCXp1ahzIVz2YCg4jpuVYGcxxJ\nTNNVmvASACF1VkgwhnxGl8a86Oxd6faQKtb8Y4g0mqLPk5rRdyBC0MJ1VfKZ\nxqqb1/om58TTRLBVzZyDKa9MkHl1GDNw7kKiHXegXBpdG3wt6jJxVjQD25rM\ng/4cTf+U2poPc5qtfcSW7OthEWukzhuhSp/1BCfhBtUCEmeYK5gMMKdf4yRI\n6UT585nQC/+Ou95AdWS11hApc5O+3lf/OCsAegZKb6C6ZwWB6XwnH258j+qb\nnerUaKz31PZ21/BdZ2K+IWmNJCt+9R3/Q120RcuuhuGkKI7RciFqIvdVF8bc\nR21+m4YT2dNFe9buY8bvBZSMkef0XPwYUhLVwQN3PUTrmcq2irKcqLAG4oyl\ngSNl\r\n=tB6H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXMZtJ+OgAbKu5QMgnBSukL3JhYUckKFLNCp5zwIQAaAiEAx/O9u19AJLqL+2XDEWQMFwWiYp+DKelD+f+z0s+L5XA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.be138b01.0_1591822154194_0.6151907134246155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.04bccf5a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-ripple":"0.16.0-canary.04bccf5a.0","@material/switch":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7yLU6/8H3iu3Rh5VfRr5FqPxV+RyVsFCKxsRk0pl2aIhy8FH8BAatvHBdAnyDlC8ihlOR3asiggP/EE6LvOL6A==","shasum":"9b31037b2aa1c71e825a06f2ff45728ba63ef058","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BlOCRA9TVsSAnZWagAAOvMP/15dDdrD/FMNo06oCvX3\nyTetRY68pevrLsy0MNGUpfMH4KJOwAiRJlHnt+6rJOUAjGbOLdvOhlbYgNwI\ndhjPCu1/vAEmoKsVKt/YoyMERBzm6QezVBnTeYScLbeO7+2dbm7LfiBB1d01\nSfNvuj8SjZYe3mkBW65ZSZBnxvzlq50bQG/eRaZ0xxJc+I+AkR6Ploy5g400\nkJl/ayPytFOXwLnXFhaUrMeI1SjkaX/iOchzCMC1WvtgMv4zo1ycrK3pGbEp\n/CFjG0kSRpHIjyBGwm2XSAFrzyLNT9Ip38bgG0pjpsNZFpT5culEyW6J6wap\nosrZtgw1N9z3qjmyxJdPgNXRv4P4PRJiSPQC4uQwdIZ4HMJXbQyr6X6S+70a\nIvGCup2QgCgTJsc8aokIe+SW0TxL1Zt47uPUVxiuk8yx1/5GPpJvRnKHCaTR\nTkL0dSzy5QYtWz/McBqzPfiyYIOgrnNLwiQZ3OeZJDdZXKOMOEazsiiVlu8X\nxxhzVQlxdba/7yJ7hNC6Uuu0UZC9Q9iLddogLSzOPaiYm5CNidwSCPAU5lb+\nG5xSEnR8pgSuV2oVLjGD2FvIPMNqO4a9HR8s3kuHOtGpa/ZQPA8NUTa+Q+3C\neNw9Wr1ZtdVhz6VdTYg+PHNdRi79YBH6gPQyP7FH2bU2GJR+JZsqM0r7WXe9\nx0xU\r\n=NnS+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDXnNWpS6+tjXiNWG0AnEmxmgfGT+0hRZgmAhThDuhtgIgIH2jQ8q+egwOnAkjMvJN5JpJcdYNq1m1U4iGELqprvQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.04bccf5a.0_1592269134272_0.5421131936609551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.b44dea36.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-ripple":"0.16.0-canary.b44dea36.0","@material/switch":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HfNkLyEcp9R/ZU15X6tE8h2fzKBaq+nak8QzJmnTtG3PePN2sHrs+vnOmhhOYtNVOHM5P1aofLACeHIDDTyQYw==","shasum":"eeae601b4177f59da6e773b55ead44a0f4d63373","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJWCRA9TVsSAnZWagAAJckQAJcK5QooZNMBGigOiNxn\nYRW5E98EobACXKtBOUbY9Q9aYNAeF/+FMS/UzsPSr5HwN+XA9xpC05PiyhFh\nX8LsI2IhkFqKhFafc4OQaQhkAzuet+khirYJgemxtwGnv7+AHlze5gJx9cy3\ne2m+g8neZFbegsirsvhlewcmZKKV8Ob2g/kfy9fbAI6rzqWK1qkSzmRTWHX3\nDwehu14VFMwQCmiAimiMSkl2nDsJmT5Wdhbzve6zkiDn7TIgdiXFul31ICTP\nMqbseF6mQVFLWX+xbe580fY+hKnbu7kEfInKp1xwv/Nnc0o75cRmpUNmzPY6\niTHrvO7DKJ6IIYCRVbjqstT+iUimja++iiPQBLjDFBEMGiFr1cQZjkYLlHNy\n1FWLBrcgR4StRNyY54mwkpcsqs+i3TXChnCqOGbFNV/z4zSPODwthdW5q4D2\nq3kYbXPN1uTH1O+XJCymDxX3MnuuLbIYt83HXJUCEN8Dn5YPFrvoLKMR8iMv\nz3v+HGl4Dv6B6VgQH1D109Bo4CGHaz9O4PNYoa1GKtIy4hGOvPprDBj2y5Pc\nI5QTEkGjPI6o/OQul9aqzDdMhQ+JGx86vauUnlcZFxLn50E1sY4EuNRtFPIl\nMtruZRNgnWIDawE2yUCPl5DXqM6cQaRbaRxjJsQ1TFPKjzD3QGRs0L2o/fG6\nZ78v\r\n=n/Rn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1WmPD0mMTfq80ZXxPkCrWbXXonEydY7u36FWuCPBiowIgC0N8zHYx/Ls0Xcdvh8BVyopzR/kHlqG6GveRvM9jtgU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.b44dea36.0_1592341078267_0.7929211635115831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.e2577e87.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-ripple":"0.16.0-canary.e2577e87.0","@material/switch":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xSlRhEgyeBOsrFQDNKPuKZINIajsnBE65W9hJIfTMhTotH9S+0yODsrVYTnEKp8pM8/kI+73I4AFB2YovonA4Q==","shasum":"961d443b5cca040f7fc02d31d1410f37f3c22802","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TThCRA9TVsSAnZWagAAgssP/20xGuAgfiSQT4p3jU5B\nHDok4f9dBmYIIo9xHkmOSS9Er4kSJof8ZgVPOoVzwC0wOLbU751fIUUu50zZ\naiJrFosXljfIrHPlPWCNp6ujluN3I2QnpPXc+b0VS7XMRGtb9sy+EGjb7T1X\nlfD2h6mZaOQjME6dVv66otFd8QBua6XVfe1EOkpN/qVtYi8tweynvmdjoFfL\nJDYWLpxYAqToZPumGx/FX1lH1XeCxwm3A1ZPB75dDLKhJ/f8CvBexnKaaTHS\nUTxtFVR9y5lZtrqrqmVmiA+lZ0MmE6TTamFfvw24r5niTcP9IcihPHTKh/V9\nEhrqpld30GQv4/ZU0YlJrt8XgtY2U3oJ47kyce8n5eJYihuVep9u/ctN1PhZ\nHdkRUNYtLLAIYdF2bxdtdP0PfF0VhEtXSXG8seWA0vQLVY8Oq+hQyG5+mWM9\nF626rDzAdNyz0WDUpMWrenss7vocDtlBnuTt2UNGTCqGa9CUq+XO+3vvCyh+\nbSIHqFcy9j5a795oCBBvTZMr+QYNcGj9frOnaX2aKC8ArJ+syNewhLprjqav\nTd39bclSnu+xU/EzOLNfXbeZr+3gmaBcBssOrHMPGClwieMJxcZ8P3hb3i+g\n3JccvwNtVIHtfRi3d6YzlxQUGjEFjtRMBJ5BsZZvl3JLFV4dkXh+1I6n8CzS\nPZCV\r\n=Cixs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8pJ6dgyW1oAx+cPWOyC7c6Sae4ztFZYw9NZwE6VSiCAIhAOgxByfrdEPZ4gMKsZKeJkn4NFRKW3PqWel0FcqOIn55"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.e2577e87.0_1592341728894_0.33453281565984594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.58b73343.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-ripple":"0.16.0-canary.58b73343.0","@material/switch":"=7.0.0-canary.3aa33998e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-l1srfE6nY579bvJZt+QZofQdq1y9k8sMshZ6r6yYFvTO5EL11NzVhytubHw2zCyH7XaDF/nu1N8J3MbI1tbJ9w==","shasum":"76f991611198cee512b6f3be8ed6a277f27bedce","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThlCRA9TVsSAnZWagAAkqYP/A3lH9hHu0CzwH50lQwz\noZ8ukCG+KyHCbj4+FRzfFMLgP2wNRpz4rxwELAwWaQX4IrUwutPZuhQb2a0a\nIezuAQF8k9aF7v+yyabaUKZWqyxIyVEPWGx925ILD2ME/Rg0rpz1QTJAYOG5\nkz/yy/Fz66eELWbWqYg20N6BdOERCyuwez3Uy3reAA1DTdenyOz4HCkkD5Rx\nSIU2G+VZ6Z6P1xycRBdUxRjw9tTKkLKjeM6o13gkDOcJtPzpZ3j//FQR7aEE\nCPybIMkWVUsc5IfHuFEFpSNe3bdh/YotqQGLUO4kax46sw7Z9cWQVDtFqxac\nYSGbF1nF3O+P0cs2qrHVwE34QiAZ8LG0Y+IUmmejw4SXi9AmiqvZdwovEIAH\nlDdr3htchwXaphp5erY7ZefcnFXYmoOfj6C8codQTVHBCbhWiw+gg/VpjT4t\n/57+wZDkpvKrhjAThIYDgufvsyRjH5j1c3LWm9q9c+LPZktUWoLwcy4KdMbP\nqt74oNaIT8ywvf3mxpHhLGQfQ6FQ+ubBdfvqy3iLvTyqk25//YJRbdkS3cI6\n/RG+A0QdrAk0rOQQl35otDk0Jb1OhssOAu+BddkwkRwc/7/UvOPOw665euca\nb39Zr+orpv/+DWHLa4RNTl+yfYyh07mSe8MYX2Id59mx4QOFDoblchWKFzcU\nNTVE\r\n=nykn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsI2y7A8GptD4aAUVGZFvAv3OV/BKfG13Iy5HS7nxwUAiBNhkmBRpvXofhR0qnVHhBZRSgs1L66bKCI6qUwjTEc8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.58b73343.0_1592342629245_0.5899552393633019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.f155c058.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-ripple":"0.16.0-canary.f155c058.0","@material/switch":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-yImTmc+/J7fymPGAevYD4kGBYQXkYUmtyRNsi2OAoWtNC6UmCz1EbHXWQ4oK6zycvnz88kGsVsfiewG5fTgpYg==","shasum":"e1c8ea493bacaec87824767e90b54d7e7367b7b5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe662ACRA9TVsSAnZWagAA8/cP/ifb6zHLucEc9BuYXoWu\ngNKw5bMbExzvraU/mVYP8IROk38n9OB/e2clVzPf3isGCwG0ZDTlRLGObVIA\nSklrKdSMXcklMK4wXimtMUUsLvwiBmmWIDIpUUw8JAsJ1/F56v044WW0wos4\nRo5Ec4cFK7fApf8cj4maCya3ZzFiDKXmcXYcIM+WDbNIvlEDOXetkkdUdpkY\nlm6jWzRL6UWWdPXPmAEJ5hhPZee31PG601PtrTqc/7UXKbnNaEShJI4p+O/z\n0gt3XWP2jkGhIaXEG8+svCxB5QsMjSWx6uj0v+XEUsQT5g7bBDcI+czuBkd9\n16JaCiOunq+KJrzEOn/jP44Gb5jW846geTCUUz1gTcwwFibJN5NuogNtuxcr\n00DqtL+Rs/uWuzQCHAKY0PWjpdRSfuDmxsccJOWsVRN0spZIj+Plyp2PutSW\nUgPq/GvGE+Z2g+g8S8sBHfGVcq6X4PBHO/PQd5SG6NDPXxwDGQxs06MkOvMx\nxAztkSDCS+VQhkvta7PxPRe940oCTK46Uk9VIDyHWaml2Vvsy6tsAsgJqGv5\nt2Utrsr6ZCNMJz7GK1NoCHVo1CHNpMX7RJx2aEZWYABvb+i3CDMrlz4XhZCZ\nIV2By6P5NDsdbN0+iUrJsK7v39IacXIlTeiYrtRetLpfsyT2IaJZ19Jx8Z8C\ney31\r\n=mnFF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNWILiwJ8Q1likzS+h+NjIJiXr1cutWqRvX8ArR18piAiEA9yaEzScbqwsNlLmR4+yWJzFGfowpaW9hOnhMJNXC4Fo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.f155c058.0_1592503680313_0.14937291096514405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.309779d2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-ripple":"0.16.0-canary.309779d2.0","@material/switch":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-q21i57fs4NrHRWsb7upASjaF8bdLJTiGlwszCheo05hEjAnhw/Szr/zTSFBskVye9aYB1b9X5eI8UixMVuKDQQ==","shasum":"9c78871f16ebe2a657208a8730888925bd566d3f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+5CRA9TVsSAnZWagAAKAkQAJlWxkrVCLcsNf6Cgun+\n63R0bkNKlWpJD609MBKsU3PU4BavSipHMrgFk3YVSo9ccbhGMzchp822lLxl\nnk1n1q1TbLqzOyl0eZXG8VVUn6T21ikh9bVbEXhpuOR7JhbsKa7N9qzK9FYE\nMdFkkKhCsFClFwcPikIqJDfJ+XS+gB9P2PK5ugVloGSmPKp0xq+NF48+Tosd\n309sPCiyx2OgPcwnnOm/2WjXmrTQc1LXMt32By+MJ2xJv0rbmUevNlLNRAe3\nbjK6kDEgslBtrRtIffMmIBTd3hExlQJaBJc8ujcvcXbIfdg9JpwgHbvILP3H\nCklLcGKJuOmbumAEVkXl4Qij7bhmPhED78rCGhcrEdzAT7U6MBlQM3aV1cKL\n7mGOJhYRt/HdZ4VCCYB41lmMn6FerlOlV10QhE4MLqctdcvx26GNYc4Oiml/\nRZDr9ElVOe/WKjz0kvbXZsIV++su4+kPuNP0mfgpuQTibKyShb1dcsJXRHAx\nSPWIzEgqt/XsEX2WO+N/EYp+qXKUU9jtcAVrj+oZmeobmX5pqo88bNTmHBLo\nWK6R7BJX8XEVvIGBjWcDdi+HIz+MNFlbdV0qo1pq5F4PEVL5zeUW4N4YKxJm\nx9HHygOrxaIJRAFE0esvm+TSrauFAQxQsYG/bB9aPbiLWTWsTPWtX8EhSZww\nITX+\r\n=ZF74\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBx2m4gWEK3VkB/Fp6maS9lBeNwdPKNoAyT6fJnqUIBXAiEAjTxrqbJQXHrCiuycSVzBn8wflMwt3bRPo5Ifoj+/SPU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.309779d2.0_1592524728680_0.9617287203220997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.e7649968.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-ripple":"0.16.0-canary.e7649968.0","@material/switch":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Lu6joGeZrw1gfYN2O94z3OREBsZ+4tDbcRqyGkVZAA2RZpcTVnanee5kt+V7Xr35fSL8xn2zkuiYbRQZKmkXQw==","shasum":"8cd31ecf4874e57f4d05079cf1e5b5ac8f472b53","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDlCRA9TVsSAnZWagAAa30P/1riytrdsSIW9mvsml6m\n8946bZ6WFxdVvsiZJYkQIGRaX/SdAFOYjYgJnIh/WKmzJepDFxdIdaMSrtBb\nqRXa/KHKZwuCS2lgst6Fl5xb+D80B6R/mYZnpJkX5hjN5F6GEqkTd75XbSkn\n/NJATsYLIp9ejp8AyfUI1APSyEReDiNpWBVfuaT3sSMam/NpFUyeQ58fmfNO\nY9Wxd+pl6IyAO7yxPJl06oRoyV4L7IhmR7Kjgv+70t1OYB4FOUIic7LJKIJ2\nHQ2VaNVhzxJs2Za3pVKIMbsKHDM/tjfZc/giAXc+SYBb64MDsSXFLcpHpPwD\nsWUjyvkaKN8RSfSO68RsOp0+VIXlV92/8IHE5Z8zRXAxOIu7RR9XHvQ5ol6c\nGK+0BTMQ015IAs/2RahZJmyytTe9kf7BRwOw2/qpOtCjIixnVcv31UKzKkqz\nCfycfiZ5kSpTpUzHCcFi8+x3tDzrQisxBfRK+5s2X0kGLbZmhW7nckhKh1mH\n5om89bGWEpgDcgWHoqvIiNfW4BbusBmJ7hokt0d24kIlnkL4E8+AYVZTAwc4\neUo9LrCQaSuj+Z787Y2SYGT3g/tXNsE4coRK2ecq7TceBiXCXmvgjQaRLl7k\n5mNLP2nJeNDeszX+ljPy5TSE41KP+kxiqZHwQne7bSi/oXwtNbLr6u9RDtvb\nvXbf\r\n=ob/K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjyrt9f7qUgxNq32i85/DGi0tNcCwxrwSxjx5uOrfy4AiBNoVIW8Oy1Nq9N9MaL8gSFYOgnnzMfSpsq4RYqpOonRg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.e7649968.0_1592602853425_0.0430317266142084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.8e21c78b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-ripple":"0.16.0-canary.8e21c78b.0","@material/switch":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QkIE4uoIivx0BkIazqmkKcUiDlAaL+aCk1gJnKkr3ZJQIx7mPQtc2gW9nd/mmUKD9rmcWp1JfhBic5zIdDuxYg==","shasum":"a99a8cceaf932a8b71cedde361a2f0ac6f37ea1c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8In/CRA9TVsSAnZWagAApf0P/3eMcfl8ChfL0rXxJJyA\n1W9rDUH/vAUnmxb7rpJVbB8mwH9+cd/wqnaX1/csdb9o6w+PHbGTXGmxG+1F\n/PSZwa9bMTBB5rNimZqGTdrEayNGktdvltYO8WvuEaapXisSmxX3BW5N5idx\nyZSlJIAqyDaFm02mDWF3ImJxy9ldIqDA5sw4IHR+k/1oxf+R7/JetNM8TjAm\nVGNETOiXyqFFqmKwSOmaa6LcZ7dxWEKgQljS6SVL7HWwvgTCQiLdLCTP0VXd\nZILpvriG+I5KkzGe4pUIo9KrgVB3CSN2EZxH41bwhIPUTp7Fs7MoChofPm2R\nvPACE/68DhPru7ZOAY7/YT1N61o9SnVdrJvHXWd1TKjHyFsxtZCeRtUjcQho\nS5GS1KJQddNFWt/7Ap9dFM4ZvXhaIHoSVY8nm1CJqLW+/B7a5LZlmnfMxO5j\nqzFMz/Dxx2d5a5o0uFoJ1GLoJcoTdCzvEahZ/BARaUASGITYST1dkcc9/GKh\nc1238PpZqDI8pJ7ZgofYIfzroOjavS6knBqHE8GJ/NmnEvRNeC0W1Bvo2OfO\nQeVYf7EtrSpe3CP8Rb2IvLSt9QuriyTp6jvJ1TBjzUGvguOPed+J1SdPWGzT\nuBq7GiHI/r45fKu59RJC7MV5Ofv7fcPVx5hessMc0SYoGFNKc6y1TxQn8EYs\n89yU\r\n=MqjY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqEnmS/+fA0yp2eF0+yGx6zSVhjCZl86cGioTuPJusaAIhAJb124shFpZDWN+eOjaBnPrq+pbM4jJqYgJEa4TvNtTl"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.8e21c78b.0_1592822271590_0.10370953619599144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.6db76faf.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-ripple":"0.16.0-canary.6db76faf.0","@material/switch":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fRrs/UWmsWealoVentiY2s8qFJgdvHd7AtcGlPza+5sFJs2OORFloz4cHKkopfIFzQIo4sEW3S2zbsZvYh/flg==","shasum":"d3c270ad5cf5777572b71d7a8e2c9de670edfcbf","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7SCRA9TVsSAnZWagAAFNYP/3gZqk3qbi/cV4dvP60j\ntnwJAa1Fe30gaAImYEIDTKKFgryQ7/6JKtoWwZgkZI9O4L8Gj8u+voPBAxlu\ndufXRz94Nsl94ZcUzhHvDEdgvp7OhOJkUu47AjBW4QP/pKzZobNis255wqTL\nJTSbLrjOG8Ju3Xz+bVUpbukyu0DmOO4xNowx/BHmB51zYoyPsMTsd1873eDV\nTkJAb8+FjkgEc3Nw694lODJ0N4rnnYlbWep7YZIKAnZ1y7jYAajfRKnTm5tC\nTpw0XpDvibB+wg4QcaKRLX5wQH2vNyX/gu2kAOT5GdGoD/vY3fXQHMG+8xXM\nu3Zm4QuV47IbM6VZwdt92mIdPcI/aAty2kSoOgMMHUjvSGi5XSESaUE8Omkm\nOspbvz2YyOuTfjAE+QWZR25qwrdGvppdWlOHUOReaMmCm2lWJ6itoe2JwbFP\nUvHqkLFLR73b+lScxfAZjdWnwl5aJONgmqNGHTNMJkYVT+NqxrljnD0hsSuy\nyJDAe7tYrw90aMAYLxqnpcjuTeaptks0LszuprfSntgfjpzbM8wiL6QB6F84\nOx07YPpAZZbnxSOhlm/wtZgwjGcIN1sqdSmbQSCW7XGvpch6Js3R3Ih4rCMW\ngYbDbOIMFNtwnZMEVLl23mcIPBCBsiBnad4QvcUDf0J+myxkajN0Ur3JpsB6\ncnYz\r\n=IPjK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5ImWKpRJSzEDD9ASBGOJJOuMmZFkC1zJZYNNGGZAXhAIhANfQXg6QZwvqpzj4yHM8hrRhA5Fwv5gO+3LfMQJ1tAt9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.6db76faf.0_1592860370367_0.2931328651539913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.c4dd9684.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-ripple":"0.16.0-canary.c4dd9684.0","@material/switch":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Dod0/MOke8Is/TjAH8GcBA2ggZK93mgotj6679z2uByDWm8ukAtXla7HwLjFCXj9ePZXe5X3UohxknF686SAYw==","shasum":"9fa9babc75afc7811e2a395b0bbfed270e5876fe","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hx/CRA9TVsSAnZWagAArg4P/1hBM4q7yprenB+SCWoU\ncXr96h5h4iXdfPBYWuRZ1mOzziwdX01hLnNm0d2bR0ESF4Uy3ad4MKEX6fmr\nf1reNblNdmkZoZS3A7/eyzrA8mquDTCryq1k2uBy21OSU3fPUFyzpsPcU5VV\ndeKAeotHalnbKxZPZ1iaJt152E+kC961To9LhhMG4kBU3jKZy/FvgroKGonE\nDO/y+8aQVWQe55Of1Ligg7wJPCiYqrrVKPGiIUPA8fz63U2Sf5yqN1bHSllb\nmUdczFg5Q+tTix7jX6msu96MwA5cUu9zN9WDdDdEI7xO0AVmpCyRgWwsXmMF\nSwOukM9gOMzkox4CsVlrlwWjrJ2/4Y5vD2kerhnPoc+XeSMKism8JUjbdz4P\nQIvOqiv77JyctablXUb9M049p6nrLAvGp5jF/65TXBFAiTmk5dGhUxhIjOE8\nPNgLiJafstwmSuXpuqsP+SisDHvNgpec6T+a9vv/ZylTSvxuUB2+FVRluRwy\nbXvFIejmRIPObzr6ni3FkTRN/XDsc2kG1QYI8rAA2KILjK56luZJttDkhsTt\nLVhizuK1uZ+gFjfXVtxCfXEHxB8CiNEqIbblEI+0pUJ0q2TcQvuqmxTdOrA0\nGi0HkXNxI8fXgiIYQi9/TSgqklujG3ts9G6Bl7IypgPubWhkczdDj9OPcKzR\n67Za\r\n=4o5T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDokACYVzD7LfvLdDud4fG4tI7eRs7rhaHInIv5KFcn5gIgOJQv8OLmnQeJrF5tm6l1tlbCbz2Ia/IHgNpxEo5Z1uo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.c4dd9684.0_1592925310615_0.3731170019511123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.b3e53981.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-ripple":"0.16.0-canary.b3e53981.0","@material/switch":"=8.0.0-canary.15e81fe98.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-o87xLnzH9JkRAuUgN7pNXvXDk4qO74vJ+AhyBHeUfkgH/PXkROcfyVtr7hnesDxUpglLw8P5BWJJAmHYln+suA==","shasum":"cd7e75a35b0cc06f9cab72d3ddcc63fcb78ca66c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qC9CRA9TVsSAnZWagAAUHsP/ipWVBKIZxI/K4je8DNv\n+uA4aoewrSw4EljrjxhNCuYeJQi2NyhrcgyZY+Vp/5NVbU/zEFBTIInN7FHo\n+qYUYEDOdjyb3HrU5IDzGAklT/iw1SrX9rqRthuN35iXA9oAEbNcOuNIjKkJ\ntUEPFXxHu/VDsXCWHxHtFq8vSjwjL/ntfPw22e64c/5cISz90Y0m7ssqEsio\n5hyoqqBm8O9wtlCZjTBY0NrUDhGZhzLUY1lB1zP1GvBiNqRDUK/8VtjG3cTE\nPozAn/3/V4aQKmQQXRuDEH7gAxbPUgyH1b/OVttDG/PbZBg0vUnlktJ3B5DQ\nwvKqEVPUdGrf8e0TFa6HmFLuKOYulv/zE3wdjud15WksvyVrVeMvCSJGiNGR\n4RJGAkYyfMh1ZHsN2UX1sXaGlrvnqlkgdKKfU4fzLV3kUkA7MgK7gMcsZUop\nM9AiTTfkuBdEKWrvCLG+cRURh+TzZuAsprvo3vbNuNLrx4P4ccbvWuala6s1\nYNpwubBPz9ghoGfLZmmvVV1Cdt3uSSDu5o+32UyHDb7qOMm6vl1V7GMie8ki\n85DtdAtHA0AUFi6B2HO6CLTFaorfAENn9Saai3QyPnoUdVA7FOUduXbWbill\nEQGonqUA4Qjt05Hl/Z+25iDfMmw1ayR30Rtnt0Gr86nDvKsDLAyb4JFl37qX\ngBcE\r\n=FMQ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOo78gNnsPLeSXlN5gfpEa+dKnrArzToQJ9qHrZC5DJwIgHUF8TX20jTBvNEp1XSceS9eC3Ni1sOfXYR/5MIEjBCg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.b3e53981.0_1592959165341_0.7456104175557854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.b9468f77.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-ripple":"0.16.0-canary.b9468f77.0","@material/switch":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Jllbs6UTSEOPheSCSRVC9CqVleB60UFrpdc+EjdcUJWk0VIOHgUPYTZfProEqEqanM+glF2RngDFf0LAy5Bn6A==","shasum":"12966dbf73a35b462d9075bbf019d4057b1fa361","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uXCRA9TVsSAnZWagAAcdIP/iGBRxToqqKhYQoTevm3\n8t5uOUYWvyDNmK7o7ebuNiiht5oLpb9JsjZhklQF9lYyiznsggTsWOK93Vkz\nAzLAaL2MKXEgv8IgQu8BhzmR1WDHhUJTLqGEpSsqPcADx/B9yGh/UmSqkucJ\nlBilN71JSIWI7j9hXasJdwQ+Xt2Ge9oNsrjvIdkhUBEWF4lIeQ6qDwpFOHI/\nyqw7JLqeR/JRwFP/XaTSC1cOpObhjAVNCUxGZEc/xaZ2AQ7KowXzZ2hPRnpY\ndnJYSWFnZLIeG540D29s0fq9m8phLqmSjnKCWAYRblPSV5RBUxWrSEqJUopJ\n++f/oC27o1SmHZovtOUdUboS/5C42qgJGRgLiHu2RoPegrBIYvFRcZMuwtjd\n2fVxM9ELC1nNMTOXH3XNLkgwzbh5HpGi69fn/Wu/PLcH2gJjySS7wzKf4E4n\nVIeEv1yVL+BfmuZcubh4ZwPMW1F4clDbmcpThE6/m3bk5T+tBGG0GBhKm7JE\nMvmmkzNv0td7PeU3gsWYvgWrca3ifb5Mp0RPCPBPkieDT1xmaSzeOGFCkV6K\n0Ur7O4jWQqQOXMHfCdSEJSmvzIR600/6CmK8YUH5Clrn4mPJnfNMsaHoIrc1\nTad56CPaRF2wtEq56lVD238HTBlZtHD4Lths8Swkd8PVqda5zHMv33HrqWC6\ngAJX\r\n=EjIw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIf2TxmUrplvAHHW8VusbA+4/gNWGgf748KaNS3XB/LAiEAmARqYl/aMzQ/XJrfS0MFmfH6vtamYxh/COpdOAdkLDI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.b9468f77.0_1593035671372_0.5178613758823891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.eb790e49.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-ripple":"0.16.0-canary.eb790e49.0","@material/switch":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tcQoDShiI8tVn0ZBpskVYBwO/MfPCii5bDJmcuUszihlr0JIcECoPQpuqGaIj85gfuglN09cwTPWl3QhM/fIxQ==","shasum":"89a95e94e224a20cd5453b3f82d7f282556de350","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTLCRA9TVsSAnZWagAAIbAQAJmAlhnzD9c98pSJW30m\nU6++QBBsv8Tgw6xDTKra5BZOhnIMJ8jaMfgAwU5XmuRy0wcM7S1apGllTDfa\nyfjYgb8XSe6tTaWeE9YcNGSd3TS63fJzLio8HJyL/3C3SZ6ZOG7NrvPYmEWC\nXUdFxHmL6OvTm8GBbZhY1cGih88ZCyCCbiVSwy8cT3/bfN2A3s353mCHT9KW\nUFohHFluA+U1Ul9gnagDhOGxDmoz/0gDJuYR+SWYdqYt2a5xzXbgkFC56OkA\nRGMjGXDK1CF6WPjH2CqpnAoJiEyltA3F4zQDrq1N/AbK1M4bqZFC2fBz6UxX\nqlW+6TTZyD4aADwbkcfxAhn+QhazdQHtUzNrX8SGxwEhWRppaIHIrk1HbMEF\nKgrCB7ueE9dZ7lb/wh/Afv+TJxTyiNgW4NeELRcuNKgUsy8QMNzGOlpUTZXB\njZ+YOgWp7kXrrXhL8n8doJVnKx/ASEKqN+tgCfBUdtPwCokkIDBgpkAG5qQv\nRSq9xkLIrhE2MOgNI5KvUPUqByDC5fUe0YuXG6CJDM0yuUwXVU68gKMROmQk\n7TjeKJ50wqqRUdzqOvK1/iPX5JuLWLmkAU95loR860ylR8sJ7WU8eUwKZ5eh\nHkRUYsLk4G9pXZJR0+DQ1heS+FvRo/Tbxo76mwESP0nG2Pi21p+1EYDDBTr/\neDzW\r\n=cD10\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDq+db9S8SuhySr5veX/OwrcSdT9wv3gXvlDUx8c+2NUAiEA3Pt4En45x2rZxp/IXu6ZtP/MBB06qQQFX/J1QdNthXM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.eb790e49.0_1593119946947_0.5508194517384288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-ripple":"0.16.0-canary.9aa1a5c5.0","@material/switch":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4q+KA/1JGSQxzRLhbVikVQ92U3k1eieA8ib5GlhmUQ5rjpeBWeZS30ZJLaxgIkj1YHijsiS2RjxF82eLmmPn/A==","shasum":"cafce069a3ebcdd9d334e394966f8b5b952bb4b8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irUCRA9TVsSAnZWagAARW4P/0lf+8oUacPY9+SIc+A4\nXGzviI2sypSK/i7lTz/C2+ivUs+s/BxxYd7Kfqn0hchT6lNT7gw/NjJDYmyX\ntVl6AcDynG7JexpGM+6AQNGNBj5wVqf/gX3RgcUPl+0S8cESjA9/OtYDWCFD\n9fP0kd0tt6WIL51Y4y58w2KqWlvQUM1FBNfM+1nyrSrSme1sZiKkGSUux7gt\n2HoKFheXkVmyQhVOitnODuF5tfnqKSM3YxGiVpSkzePaKaYTgwqpzxv+Co2y\nMzUA8pbbP19PsA9gfsqNwUvGD0FQTLzSv6KzoUOujNiXdmOGUa6IZLQyeS5d\n+ncP048PQIYdggJaxn8FidI4mvzZJT6SphpI5ftgVWORN61PGIT0NcZolo0K\nShqbrM5FctcQqwiAvhlg4ShPF5Y3FjgBaj5BNGERCwsMYzOvoeTVfqpgFNqd\nkNb0Ax990KDwEUdp3i+17I7TtYiXmorXsBL5iTt0rwDCuYgyXnWT9Jc/Qfrq\n2fKR1+Z9b78ZE1hgUe8JAbG6qH2rqXAFgFtZY38aEcBCyogbrR2Vk3FSgy2x\nIisG8JYViLba0vGD5mdQqUfWfwdN9GnUdF/ffH5GeXZUvO+kHXrqY2IxP3DL\npXY1uY6KOZahu+F/w1AKtLa5NB1zxep3Q2zGsTuu4gcJm1t5UykObTQ/gAre\nJG2j\r\n=WDpV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVf3BeZSP4OXHf2A0PddlaOljFkQnrH+XEpms3xR9z6QIgVMl0iEy8U7M7CJkaf2S2NEmQhooCAHZJ0u/N6p1T7wU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.9aa1a5c5.0_1593191123620_0.32880441804569305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.d36e9861.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-ripple":"0.16.0-canary.d36e9861.0","@material/switch":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-l+oL786inosc0S8AlevTzbpYskFSh/b6LrAgaY+1jppz0JWEY6S1pOQd2whkeKcH/PbhnULqNLU7LJ+J3g3Mfg==","shasum":"82f64d6ea238cda515b99aa2131a2af925d2f9b2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIeCRA9TVsSAnZWagAAHUsP/09PNEgO+WDSTJXumLXp\nOI3L+eZdSoWtiEKXaKpdq+yIDeorfcexj2kLmYGV/TP9NJNjhR7FkLkQNnsI\npAUADhh/B5oRSLbWCG17hWodW1BkMHMVtHZlGGva5irsq158PXpQH1n8hvW2\nNeRQSy/LcLxhpzkXzdlXFzx7SWShistIP++hKRN0bei9yI0p6YytktniYcPn\nf0YvZuUzrV1QvNDSyAJh6V9cIMrH+NROTfKaKmGENlp0FtQwqy5mkTGqloui\nwch2UdEt1w9AEv4YQQQi/n/viyYpUskHmd6txTu8aSHPSjlPyZ+VBzxCo0DF\n5N5aeRc3Hf+3P0aQ0V60IZ1GI9MILqi39LpyYLJSm7+sw/ZX2d/ypGp9txwi\neu+jhr/WZLDoJwJ5zHd4qneuZdKoz7ywpq5j2pY9RplKNEjvHHYd4YjNWNdH\nxlwZkukDUaTz2MjnOFLGcIylNP24ETJneOuBt73wl29UJReH3NvtjRd+riuO\npxMKIyDXhPh963VVTInQk9MfKwuYwiFbW/oMwMlT+XhBomAopFTih2DY9322\nYccySBJLiXDI+XjSeVUe3MeJpo6RAXlMOf7a8R3boFaUFgvp/5JT+24VmJNd\nfzyUVduyl4iHeCrE9Iau6hzILX1+rIRGOU9N/uN/IQq79wheyVTPp5wH9ldx\n59/1\r\n=EAB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6nfM7QfRnkpOnEBjDfabuwTg6NqRMY7JJVUM9YLqzQAiEAm2P6KCOs5akeM7ltfvrZ62viyc3Bl3bMKTzGZKDGfqc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.d36e9861.0_1593192989748_0.3369959955186592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.155c2f85.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-ripple":"0.16.0-canary.155c2f85.0","@material/switch":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dwgET1fSnxFHs9QQnw/005isSlQ5Fa1uJiQzZ9jUcz2Uo+IhaIEFbz/dkK+Qhu9dGai+DO1/worJ88VYYD1NFg==","shasum":"965b16afbf79a14c2a47c02fc76f14aa8164ec0e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oT7CRA9TVsSAnZWagAA3KwQAIcob+QibX9C5YLMkQi1\nTFfsw3SKZa+SgMwow6GExOCeAqATZeALfSuGYDWT7eRwbvo03cSRsvqMD4eH\nSVBsEppMsCyRszPxo68xvOYNsvBzH3hgBZuYjjypTyRZ4HVAZVxbenxgKI8g\n7I1l4s2BBjXo5e5ePDo8HkbeOdREY5TK2M1BU/lyA2QJO4ugjPURhI6w32t+\nA8OcTeznqrmb1VgW/tl8FM3i11nA7jBs5zlDlkb5RudrtVkWy7t3xHNPTGxs\n1LHhYzQ1xeBdHNaYlsH1LfWph7qdRTwQhCXV0M7YuhqfrP33nW4o2AQjv80f\nGRi9xwycfwpO3z722sDkRzL5hgdjasi5LiibzpsNoj9cZ6j6whPokI5JYcp3\nrqW9WB9QMleYrJ0peZf2HcyU76T2gGBaQqilyjHf4V8VJM23aAIdJfcPXwrA\nDSGGdEa7X9xBKq9AKdhlzc+EUFzaM6mJ3OYjms5l0/9P+grb3vWJFzK824Au\nbdRsxlEQdoV/ywtt5JQNGgnZ5ynhheXJjIh5R1Yz2KapYu0gn4q/ckA/36wz\nirRcoa3gVtv3+VPFEKsHlO0Lk+mvgmc/jXPfcYgHeG6MbGklvihj2F24KcU+\nbhTYBXdHK6xApeG2aFbR9RHDPExLikWTYy60OLSGf6z1rd4WGNj5ZkuQEr7j\ndvlo\r\n=jmky\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYoDxY3tx0Sd0ssa5Ik4Ac+lBVdg2ncfUN1AAlEvTw5wIgOGa/VRPxPNS9w4YrUCHWG8FPyOV2mRAlO3qic9DMFlo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.155c2f85.0_1593214203541_0.3695605870751657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.340c9c40.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-ripple":"0.16.0-canary.340c9c40.0","@material/switch":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xfM/u0dcHkovpaLzh9L8yeAUG+35nIsZISBO8tKxFBUnuXk2+XVYdWQvQIgEssGrUti/uTUhecA/pkxtzWeALQ==","shasum":"4ceeb488cf8de96254484c81d0a1cfba44e0835f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obxCRA9TVsSAnZWagAAOhYP/1k+hMQ3xbsv3Ndva6C8\nRWb6At1YP2ArwBQTXAhf5BHULL6B15f7qo5/7l6QuNZHE1bGSw+0lPjIq/jl\n1gpRzyoYEPoa/l/pMOkECvDiB0yVnGWB3QT0GX0vcSWbhD8sfXFmiZXGZF9b\nnIPe9wXkW4o4DKnu/yGVQHoZuyjgUuiQrQgRthL0lBySkttspMqrOWpT1+Oj\nxY1BZxuC9Y+TXd9paJhF7gBtaIFx6fgxggYJ41CuJmhqn2Tq5Qqv/+iYZxUm\nNu52hJIJ1whskmGYxPqYjRJZYntr9FOiwGL27pyJUHlJ89+mAmHufpbwAkXD\nYQpIk4yScnv1kRsTOxs6sJ7vds+okOubODltWLD8DXavm+yAx1P6hSw763OH\nEerYLIgaUmPvm1OKrZUv6w8vY3tYXJJKp6PzX8keZCYezPKQt1j/gR8xQJgK\ntz+OaLsI3pPb+a2eP2/5qJvC1nlkDvyUqKlRv+157qmv1KZrWoTb5ni73Hna\nVPtQwsHjCDFD/Zc5Au6Wyzyf+2RBLHJk/UD5/iobqfYRWedgyuEHxFT6w/YF\nljjpPSGUhsfmRwGIL+A9UVW1ZC32tu3PxtGmThr2tZFR9XGaH+xcEDlu1Q+O\nO4AR9YC1CPBli5Lq2Hb6oKeUHVg5YbxlNRIHjYAXRrhujXLxeBQvpHm53G2v\n+S6O\r\n=D5qv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzSleYaUZUlWLz67aZ58I788FDfr198JbFwME0u+NEDAiEAlwkw7WiSSDY0vgKXO2qHOS06XjOwDiMGrAfQPr95P4M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.340c9c40.0_1593214704655_0.7063949023879748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-switch","version":"0.16.0-canary.a3384d2d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-ripple":"0.16.0-canary.a3384d2d.0","@material/switch":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ffNsbLXTegvgEW8w5kGtlgNjTdt/cLwkRgiefC61FiT7W+DTzD5/zbEE6wSsLZXXqU1ZdLcgYIquSQ+atrELwA==","shasum":"7f85566a6cd8ca30e9ce5ab391c7fb37688719cf","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fxCRA9TVsSAnZWagAAjAYP/iEXOZrEfUKpXRFglw+7\n23q9onExyic48nRgSTSg3ATtXm3TwWmhxXQBwDeY1jGmv2QDvOdmr7gDST1X\nzRrMzgkR6rAUXxOrABsK4tPH3juVwLf7iyVars/bb0452Gsj92OVsMAPgNFy\ntq6qFUpEqJSmO+6/VvbEtXbisJIv+epdHqFGUipbrZ27vFRoZyWvQcCggJ2U\n5h+RMAtBh7vHGOTmOLR/sg07XyT9CimK7iSYvZGrBhwdxqAbBNF7p3ym0my5\nFEtoH4ZpJqQ5NHfL2JkWuV/ICrctXVAB4NSOquwe/UGg7h6cD0CAoLlfHyhU\n5Xrx84VKpRYB3jOU+UQv8IWOnfaSHpc9b8wjNQ7X6Ebzew7G7o9Hu96yC95l\n6azsEaywPlp52iSV/Dnxqdi5b/dvOsRMEmdjEsAVE7lze2j5d+jkKQp7+5QR\njMeaSuJFi4x6dIm4e5p9YRhfkH5frG9F3Yo2ndN4OvX5K9yfRBERTQcmwqWz\nutqqReJYlzXhr7ddd4ZL1wM/xbL4DcKO7sYFzPdjtOUC7ThM+lYEm7sl3NTr\nfXI7fNlzPPYKYqbE2iRjz67sk2BDowOiLLlklEmhnsjNv5oeQSVife8lJW9H\n+49AW99cP3hdbsHn8sohs2rFMiJKsbETmKBc6wkwumSBqmuc3vVaMjdBtxCh\n+mn2\r\n=pQgQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIGZafztzkyV+AnlqZw8AO8oy9rnis5R9mKBFS7qnWqAIhAP2FLVXZN7VgVtbBF5r5m75tkte2WmvG4ZCH7cBy968l"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.0-canary.a3384d2d.0_1593550833326_0.15051740541724867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-switch","version":"0.17.0-canary.6d056c96.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-ripple":"0.17.0-canary.6d056c96.0","@material/switch":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-89QuoUijXedSJR9mDvRKB898irutztrfAG+7Peh6jfowjeqzy2nWmM71xHoDl3mjzOBmL8GR48F3MncF/eIyBQ==","shasum":"99274c7f66884f2882576da8f0c08028024dc2db","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6omCRA9TVsSAnZWagAAhUUQAKAnR40fR7IoAvXennvV\nyMcIGXPPmsDHoPaXvL9WQr7KMYz4DVOCwWi57bHBnFqAcfHykAMsJAGiYy3r\nmIlLXfoM7nRIX1gv+5dmG8HfytBIBVtq3kkkoNXfA2tQ1TcTHw+pTAVuQNLo\nmgKMX2zQhGLmlp7gEqEfMJQdqobDfoyei1WjZUBl12NsVgssXpGcYsZ5SlLV\nGdCMq9tpHOJ76QGZnJ5ytcZdVuI99cHzlO8ammiISiv6GtXkYdnAyUWCiHwN\nyrSlEjgFSyMhx+hifl8giQUdkSJk92lmFwDPQpAd4q+8WKhS/gT6f/dHkL2Y\nE4AakuelxHWj3OrHnBlN7Omryw2ojF2XV35X2Y3RzvryPRv/p0wp+hSa+nKA\n4gpILpNDRC0C10ylbx1bHHUcwwUC2lkfJTQO6y+dp+eBWD8VCgROyHyD+3is\nFrz2JwUHZOlGrctFmZOjZrU0bqnBPp/DhtzzLG0c+xPPYQbM+9n895vZl+iD\nTnNSGLUAYPILNjAKPcpwsfDe088kMBpGXPJxfK7bialWnFc7+uP5jx88Z0e2\nd/7KpeNwhyi1zOOXTj26467JVIddn9w5V6YKKL9Hs9DqpCD6CnLZpn19Mrr/\nbadVizG/z/mZ+W8fsSvYr8qIwKInw8bUs9wAog+GUXns0eKjR0WSDs+UZ/aT\n+714\r\n=LO6s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn487t6p4ezifz2nfcUPy0/eyuUeO/XeJlgv6s6EvvsgIhAJt5H6zVkeHvpQwGRbLn4Gq58FpRvPjCm/GOfYLOFyBm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.17.0-canary.6d056c96.0_1593551398127_0.39853936862124595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-switch","version":"0.16.1","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.16.1","@material/mwc-ripple":"^0.16.1","@material/switch":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-EDC8x2dsLJ/EUzp2yW0xps81hrE3S2EJxwKrkr+zXYPYC4SXtWmji408eONYQEw0ugaoxCsEOuoVjKvr6Jeohw==","shasum":"05e36237846453d8249c939051d5f15ef9697aa5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.16.1.tgz","fileCount":16,"unpackedSize":55584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tPCRA9TVsSAnZWagAABfwP/i4yRyHbtJCaEAkDiaDK\n0FKr+Ptuk2HN1jMfV3eHbn3X6kf8nKbu69iChy9JrYdfDWlGaBqtrwdOAOcG\nAWQsAHkzULN67uk54/EfSjGzfgBk1UIJdV5gJ/Aulw2YOSyrwG81Hvst1Qtp\n7SChBVDnCEtWFeBcHpLjVr1f4WT1ZzNiUedMv27oA3D4i3arnZc1BHPtkSR3\nJ+/+D621ORbXrCnrDPGzPTKNNnSy+8Zg2uLPngjg94xNVlY6mI/j7YFcUMPW\nhXs4czmGvblnr0OINY43t00Hg1vpGFOSHe1sBW6S+GBZtSAWtnlGAq1pwx5t\n0J4NmcPf2Qvkv94MSGRkoNMuggIZ3D9wVoTYMnUmBpr9JigcInwAy5zzZ7MZ\nS8Dpi8RNDJnsxQY6AN9oQXmLtymuXjrRko3GQF9AOZT/PFmLf0awa+TiLbsf\n0INCclSHHlUXShdPnWNvLOFre5lnJMeZma4bcBHnxFiMxIHsxTqOCDf+4R1N\nUO5hA8Jn+Lc95a/3Y0TKmqauf+Gw5qJMcewfODyS9FsMRwBRc73aZ65mjP7I\n1yRGyDATTLLJGxfBQyFSCkRyczfjhVDO8cIueZd2rrke06RMdDf16MgsYpMl\nYrf7eLX6NZefdjvsNPbjnaBh8Kd5FzLX/VI8+4C+4FofXq6vmKjbEDo+SuSS\nZipr\r\n=MH20\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArAazWkitOHx0DQ60OEYZhNz5Bo3Y6moFRXGrBzZlDRAiAir3+hvjtzUFsbB+qzrUDJJytX2+WNvpxzltReDP7NnQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.16.1_1593551694631_0.7449169045788697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-switch","version":"0.17.0-canary.f7e37607.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-ripple":"0.17.0-canary.f7e37607.0","@material/switch":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-T6KoXoBMCgDemIDmlWYjoGZ/wJzWLUfL9erPSq7DYYrgcnYn+RQ+qCND1iQ5OKYlSy2V6ST5fyLmjy9kho2jew==","shasum":"14130e73eef07592b75576c8cf450bc6d197bc84","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IzCRA9TVsSAnZWagAA46oP/2MteiS57LHSJLMLDDtn\n5CyKvcjq8tBvE2fJklGiLLVWRKQXSckFt6Ub0STmot1ZHdiUv+O7/VJa2w88\nSYIWKKPWPjSoV4g2IvbtDNRc/H0ZS/N45msigREVziFSb6Pv8oorUDyBhM5W\nlqROpBklyEGyiGplzEpG6jCIsWKMtC3aQIt6NxCEj5PYouudjzxm52SFvGSt\nBCyY9gi0u5JucxcsW7HvNcGQ6i/oCY4hYSbZGQgjSiNEZtSIKYwPGHCIPGWQ\nqEB1W6kJyyo6v65p+w/VH8vg+cb5Gy2w7kkaCCqOcHypKsVEDF1M6qo+szEZ\n5kyQBggdMInjbR1w6E1PCF/EE2tJE33howC9cTUSl4o+OMkcRDa8NSH6qOCm\ncPUs0tM7FIi56E58jDevzVp64yQ/+TFaUwY+rrn/9pYLTK8ViJGTc3fXYT83\nNWdL+FPuc02a8rNHi1sS2bOeJWBKtIgeRDbMxIILpD+ithY9LX1vOk8P3UNB\nqj5eRfMvrlK7LSA+Ijl3m8g1OA67bdSNPx/TW+w0cu5too4pu87chWstb6yy\nwEgJLrf+kIJ+fpzUejA+lHmTI8EQ1DpxRZ/ubIEh/H2bv3ajQAL8YaTkJevh\nSe3vyBXt24GSoo7ZzZlY8fU2wDPTpKrWhXmb+c5YQJDAqiKXwMfxoAQGdCrz\n3dY6\r\n=dZCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHl+qYDo1yZD1rAoYl/A9Ou6/iCqD2bL+p5Xl3WmtNjXAiEA+oQUoETtn1MB8vCTit5jqS6yGnFaH8T0zj2AL7HoUjg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.17.0-canary.f7e37607.0_1593553459419_0.028356150302557115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-switch","version":"0.17.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.0","@material/mwc-ripple":"^0.17.0","@material/switch":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-rWpIDX0Eavbald2g9IyMea2YCC5cg3/eMLcOWRNEwdJdIr6YX+6L5SZXw97fBVanwypZUihquRpmu/1mkFOrSw==","shasum":"e1d13993b3d8801d8014386ef85e0c097f216d3f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.17.0.tgz","fileCount":16,"unpackedSize":55584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OecCRA9TVsSAnZWagAAxQcP/1atiZEJ0Yk+hndaU3uf\nl754C/bfDbcce79DLgKaMwSxDWjSI6MQ7jUm5PNZOqOz1hos4kcHnOvg10kf\n27UkrO+389iOuFoGMoMWhlnMCDgFYVHYqacs5cEftjKz+g8ZKw0VWyp1JA4i\nxNO7/XU92wvY3DivA+CeCGRelxIDuBwTcFfwvQDF4I5VCwqfk64C4Zai4PYs\n0R51BF16gv4Xd8SZLY5YZF8USepSBtMkzwjNmoyOtMJWWnkGhqeBQpByj8Y0\nDZLvJKaTouX9dmGyk9nt9XiRWCXbNy56Tq6ubqAyn+EdvhshYjUA+WySjHkl\nXDnQInKCHzhIKqXLshTXJGUiW+uKp2Fa8bGegNp5zVp0sJ6gfUskJrBJZpoI\nv5YvYuuU2M77TA876nAKVhbCn11kfuG09ogii/zmy0T4jzPzIwTGLuiEYryo\nfmgTuxxiTsQxcYmWC98sm4wUf+9wDfuJJIUb3M5NUeQ1hXXICYExKT6+E2zz\nzD3NoMUUBD8DNFRTjBlBUfor3UKRil6oDrZb2Ly4Ih4QGV3Y1U3VY4+JxprK\nFmZ5/N2kQ6/RQ/hKjV/O9Y0PY+CfTRhObv/yiyaGlnnm/KzkiOqXol87tnaU\nrpJvUgK0AKvJtx5N0P4wFcVCJVeC78lhDgpUG2oZSnVfRnidW4AqDoxZo9ox\nYkxX\r\n=KLlK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTJlJhYBeOECqoA5GtniX90Rgto9iAJxEpN6pV5a8PwAiAMEWdzm6Tgkig3ECB1TuKd5kkPj6mcD/T4925RAcJ/dA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.17.0_1593632668211_0.02477015097711277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.0afbfef2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-ripple":"0.18.0-canary.0afbfef2.0","@material/switch":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UJfbtHI28inbL6aQRshsaR3+j/i507bypf3vb1Q+rqFpq7sCOAZesUKeAgQCwVPAmTKuSZLM5mygRjKT2v6PrA==","shasum":"87cd6b02858befbb86d9390ec47f21c187dc9ba4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OejCRA9TVsSAnZWagAAuf0P/1Gr6ACpJc0eagb71li0\n1O/3ELZoCQRzpMso4Bf+Dd+VzI+PUt8D0nqUYT/qvXThmZaMimps1rMjOONk\nIT9PlHsWYVmLh2ypqgFZEAP4Ab7rNTbsJZqveeYGHF23ekNjeIiGu94aeTUd\nTHOW1mO6dq8/EMP6vn6pANPq/6h98QNPaIoSgtlMfjZtrUGMehP3IR9k3Vlo\nMdBabRLxFMt9MN4kDv7nUQjuzVX+R1iqEGTfLM6pChd+nZiK3KIV9WmFwRqh\nJAQbq3UMQkpOB94aWSTjvvBpkaEB/jZfUj3C7MjigJAqlwywbuO92t6sTrTc\nTGMyeDe/oZC+sqexmQtfWx/zyq/Hc0H9zhPBTSftpV5IufORgUPkv645dqKO\nSdFPHBunt6gjOSxLbLsbe9SafgbhDIRYt4nDGkQZhce1TGyJPllfeOsHYw8v\ncq8HBrlkaE51atu8UCRnHaKGtrO682bqZUaqSJ9GJoZRGZGh8v4SHNZDD2N5\nNLVL5MS3jSmPF8uwqaYQLeJfT/CWiT5YgwSRYk9Gx5w6v0FX9IbpiWLKBr+O\nELtDpFbFDzRuMgpCxr1YaCq93xjYfIfLt2ljW1ECnUO3ZXptX2BJjlGc2wWe\nZFMq9SC0XTeosi5EU+0JbaA1IFCMwAmcZjI7bkIqem7rBjcCq642Z1gFwlqW\nPpg+\r\n=Gj4y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBvFDGwZFPBVEqGptsc2lvhZOr/FXPLr2E2F7R56Q47AiEAhvNLXBeaWo+SESV6gbPOtzPiU7rsTrJ+irPWP0HdmrE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.0afbfef2.0_1593632674696_0.07296880460112276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.fd970958.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-ripple":"0.18.0-canary.fd970958.0","@material/switch":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bN034nPAskasYTMQwg2oKRVtZm7n5CgzLQlAZLHyvLfSgo0VTTPTXMCPIgBGD2iu/BBNxeagCgwkNVU3ytdvfA==","shasum":"7bed09042eb6f252c90541dbd9c22a3e5931a3d1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1RCRA9TVsSAnZWagAAhtQQAJMfohBQFMs03N8ZkTmO\no6WGJh9ozXkvN3T7hDQ88U63d+8L+4Q5BwNFA1GrQ5XEgpglb91VrEl2eTgq\notzU8d1DSgARzyRP+NaWEubhXP/3a3QJstpZLMoXdKEe1MUnM37rWilm3yL+\nouKBOL5RrFrPEOq9U+Q/tGS0jcXdZ+UlQgRyXV6kY6RnAz/NLi6zWEMAPk94\nnx8zbOh7k1Xb0Smr8t3RH+xmjvq0nhH8LOaxGGr4/Rvj+vWIC1aRHpneabC4\nPf7X1wimspjCdO7L8YOwf1chRGAMLgKUkmc503H6Va3yr7u1hwZX3tpulXr7\nhm08iWlcUKzEodvAEyZxNPXqi/a0gBxkZ3bD8KJsXOWYY5JKZMZ3l2ndiOZc\n2cAqiOlrzYBOiZm0EV278N4mMwlzXFvp7W4tRDBe603z40ydtRkr0RYFFxit\nI2XH5IbLhO9gSV/F3YVNqWhL2Iv8tfFSs5b90hH24at79ODrPCY/6DQMVMDz\nET14pPG54Wqgl0phJmRGLXECOf5n3zlBDcs1U4g9qqPmp3C3BD15o1CwQwiX\nt9z4vt6VPQEdK66p9J3SHQB5OhRpvPhQwrjLtHlwS8dC9528cjKTa8xORZTo\nN4OLVxYPsZOp862Y0nFA76yKzD02a/FOpbTLoPOOXpvLnck9FSIad46DFrDg\n+OXQ\r\n=q5bd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGhss8w89yWv6a+HZXiwvxFCyTNvrbpdpywNvItJDQHwIgKc9f1+owqSSIQImo7nujQixnWCtvMeV7BsW4Lpgi0FY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.fd970958.0_1593646416759_0.06917419213126275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.fd44be19.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-ripple":"0.18.0-canary.fd44be19.0","@material/switch":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Aad28+zhc48YoZOL4qRH+3UEtssCBw0eEAQG7skATrnEfpONkuLFD+re3yWgtDQlSiJB1iZ+fMZorZlc3TfFsA==","shasum":"39d8c1b848cfb9359356964a23041949beeb5e53","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XU7CRA9TVsSAnZWagAAjTwP/0rqyuxjhOGp1AFg/xx/\nyxnh8GtXfdEZIbYa423MEj5RXtqW8zvEh3vRl67LByS+TZYROyq1rgLuN0Kr\nIt9DWfltHoV0BSDcu39UaNT1SuplwMNCNfuOm5nTL5GbM02sVHaMg8ULZtZ0\nD6vMWg/litpyfaZqhfkx0ETfYuZCI3ji6aMXwsokoGW0uwPhucJX8F/mwOct\nKDD9u7+/dIIkhk3LCSzAKEgCg8bYxjgof91rirMjzftQU33XTCfKnRK+tD/3\nrqh1Z5ijiuGJB7ThaeuELU1kvItHz8k3nfmCmd65fByy/7NVBkiGd1/kLC6G\nRS43xnS8X0uRvt1aDeqzFL8Aau1cto/pEbZFPeuA/r3EgtgBf/QSKHOP4PMB\nQqNpwt+7Xn7YEV0OXuD+n+whxZbQvxA0abMRL0uOkWqR1hW0LzlIEHAx7ZsX\n0UXjLJh3HA2JT/VjbdYT6A91HvEyscRzxPiORcBmejUNhN0vMJChncIGsA7I\nHW1mLss3RNAHKdyUl0u4sd678kW8KNHwSbBvyVVGyRAE6Tkm+REuen8g+2m8\nJb6CXErm1uT9YH0pNtBQKAG/S7flMiD1UwLVOcfCNZVCjAsZwnXxf3n8TEb4\nKvBiHleuTOLhHok+njTXMo76lvPCKNGK4vzr8WaJHqwOfV+kVCwj6ykgJ1in\nawz5\r\n=4fAu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5+mW9osqmtiuIFohSD+aRHagox18euZBGJ/GUyZYatAiEAgZYmQFDkYu+C9AYLjhCvwMva7SktdUjil0PsP/Lhdk4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.fd44be19.0_1593668923092_0.9938135152776542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-switch","version":"0.17.2","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.2","@material/mwc-ripple":"^0.17.2","@material/switch":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-HgNYKKAKcVEOxVeIoHtvYd5Y7Pb3laHRSKX9cLgKivUgwjBx62QdU0q8KcqQAySklI+6MUXAMqofZj8eggkCzw==","shasum":"4bdff3f981958cb0b396bc38a8b27f094fc0195c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.17.2.tgz","fileCount":16,"unpackedSize":55584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xd8CRA9TVsSAnZWagAAx7cQAIaxJEIPsFBOpgtrHqWH\nU58sQtN0GGFsS8Kn2IfuwpAs6+xnlgRv64nDnUIDwRhThPw8L9Esjg4LEBT1\nmqRMoMC+77Lmx8OBxBf6AXAbs1GdBQd3UybebnccUe9D79YzxUv5p4LFzlIx\n5Ce3zEfImS/JdGrH58Pn+IeqNfWhRM/+GCnAJqu56lmPLUtPEbfJY6cWtM/Y\nYyh25gE6iF0B2pb9W1pEsbcZtMTLVgD190iSOAmpfP9o2MlGjnhIAZRrp+/N\n/b4Ag22t95R/ZAbDNUAFoMr7ZCoOU1OMVQBkuz+rziY3TF07vZUyIQbg8GRk\nI32bER3RlzK5dOoI5rnJkTgDf/oY6L3/VQzcmMtlmblutX/9U7M4yUG5kp8p\nI7wvAdktRICRRLkzyNoMM/XS40MvAQRnPidBHyHsze8TesnAMbLG9thIhxfC\nfgqMLRKW+oigdIAbSIRxvNhkNxrFFJIwqVKUM9yyIZEAInLf9zljMiaOe7x4\nlF05oJH0ssVULl+V4b8lNHnD6791zXPF8DBJ1+rkXcEGDFrHNf9SEGrMXoQB\nFXOHyPn4E4d3sFswgikAZrbBjMECtQ45nDmDhx85+4Nu9AAYuxb0x3sjmfCe\n/urvR5iB2FfO9pPg/SpQGrOc8Z96qKCq5hXphAMJC5y1NYHPcHx/OeaH86jn\n33k2\r\n=uavU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3KC02iUtwjK9NtC8ko1VjhrtRz7arQ1YOSNG8wJWM7gIhAIzqn+lVVm2v7WYHAKb/x5c7ta5mYni9Qhop/UtgZwhF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.17.2_1593669500394_0.046230461321028926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-ripple":"0.18.0-canary.ca6fc6de.0","@material/switch":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gPjTHs0p5zgkwnenOwO6gqyaaShd7hnkmeh73CEQN4N/BJ2Xs9ns+KYrFLKVrIXZgmNdZ3Zr8EDefypC1IgIMA==","shasum":"baceee954e92da9873e2ec16eecac266a5f76f26","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfECRA9TVsSAnZWagAASKQP/jsQhZqrFIIzNeq8NbNW\nBnHrKuAETEFQl9hoKuv9d2+YA60gb3EwFbqmN2YxD3exZcuWkYYOAhCpxwOa\nfZCGE2QlBQrrXhB6CUL2ZFbOe8Piw/eCnzq0adg68faie3a6nN08rkfAmvr1\nA2tou5lWqEOylepmuu2Bj8c0tffK6enLRwy7Aaydk31D8lpQ0h/7yV+4d2Jj\nsueGoBRi0l4yoFek2wDJyL40CfQ6Mr675TuwtKGx1SGepkWyntpn8Z40n+D1\nFPN5AD2QSapZNkV0B4RTf5DHJZi0nh+uRYgsh3+tbgRilqBy74hUf1QM99I8\nkzhnAjcK5QWZKCJQu0sZ/EEmUK4r7FNmwUoNtpifS+8tRVFx/Ld24ksji0Yo\n127VCpE0LE4SueCT6HwIvIThgQVvi0sq9yH8wwW8teNg6KNBhku5ubSLXAUw\nSn9W2/77e/+43I/Cwy9GLWCeKyIYF+BE3pquBg9xQSC/hVTve8k8UR1eldqO\nfWkHsUvDZCVvuuk7WvX8kKv5xfG8Bt/RZmDKj8k7sK6dd/sxsm89CjlQeg7N\nwaCQRPp1D90CUQvfsT13S2WLydnY8oiO139ebV9NltlmJ1b8fkHD03+0SzMz\n+qVTipuiletxanUJkj04gd4EHvwCUQQkSf5F811top+CiwPhoi59ypJNSEAB\nHtfO\r\n=c9rL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXz1zRLCTmUHyB4mpzq7TYhSW9DkXP+oWbNcfB6G2OPAiEAkA4+B1byZpUZ8+qsj0yrHOqsVfZ24LImpBENRfuNv3Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.ca6fc6de.0_1593669572412_0.06668797775236279"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-ripple":"0.18.0-canary.79f1ec2a.0","@material/switch":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kkXSdMYl3MxMb/ZwqTrt68NWenHj/pT6LTYorKtFmw7ehH/pVKHc2M4aucVryiQcUmx3Ej+l9ra2c2QbDi1NKQ==","shasum":"ff95a206a52b175dba19d619ab06cdac2dcef1f7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLHACRA9TVsSAnZWagAALoEP/0G+GrPXQl878vaaoyiX\nOlvToxdkzErxHrNgmkFnAiqyFqYrlQtjKj5AmSdZ2deVBjY0qShvcGRaADL6\nOJdebJq25vXhZRs4kmruge88MFx5AMUroElpuBb15zVAfPRdBMue5rteX8Ag\nMKLOwuw/4LrmL0pgFpN85VYeJaLtisc/JBwlr/OyocclEDekS5UTnTRB4OQw\n+4SoC1GsySTJMbwU+qF19IdLhefAiK3lDpwEqciiFmXESd3OpFkZY0Ulf7Lp\nI9E3NOSpUZ5CW8l/by3Y+vwwEGsO1dx5+r1xAEEo7dpdyyOym+DGsaU/5QZy\now9v/5+BwX1+l907uJ2foaN3M3Za3AVpdLxZxew1BuUwbBfs464vVlggA0zi\nDliw9FQ0jUAoxV6dmdqliEEnOnWJWF3wtnYv6rlf36+pnISUW5BvaJz4UTsp\nLToVH9ys1KnREYRjRmNUkB5Lf2xA2KCgUCjSdzi9yQX3DEkZLQlzXWVBEHuN\nQ9ADuQqbAbdsJAoMTfhX1mM276j5x1dM1cNVqcjsaXyeT9LQ0PfBJy9eB9Oa\nljGTH08QW0UqiacJtocAm5i7qjBQUcZJrQA0GMHYTXMMn+1z9PXWGWM3ZIb6\nlb436e3r7nxE58W3OVnx7Doo7MVluUIoOEfa8uIVJpmi13nVE/MLULB6R4G6\n7LC1\r\n=7nzO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9ZUinJJf4/xLM2bA+Vt6cMaWlxERzWwO1JBQ/BUufpAiAzqJvSAjeXx/K+PKGnHaTXK0ecyVTwrT7EMnxiQDtDvQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.79f1ec2a.0_1594143167955_0.9370460975797503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-ripple":"0.18.0-canary.a7bc45ae.0","@material/switch":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hIwXH+VsZRqa1uZk55q0BqLbs3wAnASsgVimJ44E+PiyUd6Yk5dSqIeA/ircP9BuYRJEL5sesHScuzCF/sYlOw==","shasum":"ffd7b70f2894d4146aa5e7c40616d4d6c1277edc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KMCRA9TVsSAnZWagAAOnkP/jAvVLjkjk7GBzGNVqDi\nusdQmVvkpee6ayd8jeajqUDPXcNEQBZMu7fXrj9JAcr+VRwNS3VO212dbjRo\nf2VZZqwNytXomvsX8aWxLSz0SwuPFjt91wVrwVFClhodfeCyYc4XyEg2vNVB\nylj5glP/4mD9YEJ0RHj9ilCrSZDblwTTNOq+x/y1Sior5JA+Ndo7Q74OkunJ\nX6seaJF8kw1YIJbqxS3uCdfuRsnWhLimaVh2dsGWniGI4dBQyzGF7pjl3AuK\n+yv+T6tKWGiFyEyURykvHIG36PUqRrQsEw+qacJVS0SJ18iMOKlzyXmeZB2d\n1krwr6LT/N6c6IAwJLnC3uqJbtxhwkiR32jXO9DK+yQcK70hY+RhjjSuBcw+\nW71cpoaAPjXTofZK5SkA+qKH2yhqq+ySxPyTkzLZP9WhW13XRjxZYTskQjUJ\n9Kcv0SUZjJUFK71xncX01W3OtTSdHDwIG+gAcvTlVIIOLzso8VhM0ue0AL17\nNJfJcL6rn/qhue4nj6ovcmt35mwU7lCee/5x72ILXVD7YSOQHvS+m21oOfVp\na1uXyv3dZ10bIfuORQhPwR4gcJknA5NvtCDvRiGpCkPU1ojTcg+yjY8gSVSW\nXGt2JfoI++UbtsYdSIhNWOH2+dCOHxfKTHzR5Z20DtTt0ft3e4CC0EV6Miji\nxbto\r\n=D/Vu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtNT7sG/aq/vm3H4liwwth94Rv6SkqCUX9fQiZJhoTAgIgMUfTE/T4E64Y0R1qBBx5n1HaeKWgVoZroRwLLoMmVQU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.a7bc45ae.0_1594315403709_0.097056396041594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.b184bc1c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-ripple":"0.18.0-canary.b184bc1c.0","@material/switch":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EW4r7jnux/hsGqNNagaUWs4FZcfyttfi6RQ/pkd7sghjZLB3AH0yY+v0KA9cqeMDXavjd2pzTWppXcEyC7yOOA==","shasum":"3653410cd693622617ac5cd44d045704504297e1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1S0CRA9TVsSAnZWagAA1woP/0InH9hpgJxyoRhs5Oeu\nOeeskmKpkewg4jcRBGg/IT+DLHbqh4BxdmcvppgMbE2XYp9xQPcDtkLhqhqx\nbQgzKeRzkWC9fJhv3T9md8VL9HC84axGyr5N6UG79JJW3iLMlmlAuQDbHqsG\noUPT3w3fgwFYHGwPdAoROu3u8/1rfTBhARf9OeWzUZCf6juNLOH1uG8WA/1O\nvGOLSQALK80SsQtsL3zeQ9qb5MKVYXZQu82DXAZKwbmsh61ckNdnqVxeiVs5\nVjsIIMFm10kigimJLVYdM36C3WDgnaAMicQiO+4huwb24za/gBxsCvGGStZx\n4C/6R3XqbJY5smEK/B4vWvttxCF47e71TjNjDv8WbU4NTmf9Rv53RnlPgnNu\nH0t7q2X/fjxO7VAvJ4fQdWEJGs/z+byiG0DzfYqgp1i/wdA0/ag5qxwiPZny\naMa3jeX2h07qddOv/SS6iM0DgTVKIOBeBW/JVv+zqgRSZMhlq9iebXIQymiE\nVC00zlw181oS7753sb2p9fJqQaEuH9qH1aPPFwcvoYpByUChks05KkQ8hNJn\n4zJUKsQh80Qlc1m0IP6Hb4ZZv59G5giUPfRR7ilu0W0islctTahtVGA4z8b3\nI9/J7+6MpE/jtkhM0vlpirkpQbVKl3sL/5nV63eriOhxWVCg/fQ25QcLGruR\ndvXB\r\n=6lfg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM9+DOdQva5kO3cR+6bFqnwV30s/eAZnYZDyT13SYxegIgahZInNXCEuXoMoUKeRltv584BfgyaYocjzinqDaISXA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.b184bc1c.0_1594315955908_0.39599951902020614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.b39fde62.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-ripple":"0.18.0-canary.b39fde62.0","@material/switch":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sMAPIBJ8mzQJ4ckCIvqn/0ibJ/g3hYnsD3lWKAvdl1deUc6iPvrhboluIaptHmz1CV+HaNQLdO8lQTmwIhlQmA==","shasum":"2be206ef4be2e3b5d0888a462af56e6e670f8701","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XuCRA9TVsSAnZWagAAV/YP/0zJZNjb3Z+R2C6ZJemg\niW/slCbRv0VCk4Ft2a+snE5YbFZaa0FJZq/9NXdVrsy3Z89L9rRG0sscqExe\n1woZPQCVed2epB1NZZyq15xLXK3J8E9YquIKcU8CY+NDw/+ATqSlTbyJSaSo\nZW5hDG6JPCoeTwV8kELw+CrMCi6lriVPlApZDq4U0NVJi1NO0Z0bpBxKpBDq\n8jSCczi6YLSaUORimzp/qPUIY2etpwqTD6FgGs/RIa0OImxH9oikeLQvqFj5\nyWw1vjlSP4CfeRM1aJFzcsxSJAavYym7uO5I/0wrmcwdHnofbyMYks/vcCeK\n8o599O1VdvoDwcd31EyxmGfP9hkXkltYk+942LuMYFEEJeNBYjXCA8ReSfYX\nLtjpvshFRt8Mgkola6C0SLeAuldpQLnjJI8kPnubeEU+ze7Jri2hC2h7+6sW\n1DlcygExS7K+SDtjGE+0KVfBubHbs3+SItYpiWOlASps4lCmfQdgjTPbLpLK\nwF6Pm04U3nIaVnwTzDjbJnKZCfIe6yG756Irl8MXlgkvdo9TTEnyIxAFU1FJ\nKeBlNZhdNDuQrospKe9X1CSxni65I0mmE8HBAbR9+YklWNDBXik8FPjB6zFn\n8/FAeUB4CcZUZ9WgA0OcpUDZGTl4IcxMeu7MrsZi22qz8rMIr7UKwEJUteZV\nBWz9\r\n=xeWx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoKx2rhRWmVQGK28WTxBRzJjqHKhuu0ggBFvRzDre7CwIhANrfQhtKjNQ7D9l3FGc9YIOlxrUVO1aUcYlCI9I7v0P1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.b39fde62.0_1594316269674_0.490078683954688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-ripple":"0.18.0-canary.dfdd8d6c.0","@material/switch":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pDkLrB2YVGGc9H6oCa0P68WTXt2FzEeAWwRStyEUhF8Fw3JkBryEVVKLR4kC6qRQqy9tJus6kvT7ZaT5AdbjPg==","shasum":"76c80469c168af2b1c41e09107f099598795580b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2E0CRA9TVsSAnZWagAA2kAP/jewB1SSvwxrpNJSL3EC\n1i/tefm7Ko+373FHc8hUFYQxEsaKzmNbxcYFb+0YmWIrv7cNm37SwAkUmHkd\nmEVMlVQaNiE89mFRC4L5t1oXj4mj8cp9SZdg0GtPQ0ZRjoX11aUiwYpYrteG\nlHAubD5RRbhHUfrUXG/qrim2nq/ePjFhnd46AKUOQAWsl/CX83/K8mrZ4zae\n8XgKWMF0JNO+dfW60/lvamV5pYC1D75wod+ZIhngoPSMyTyAAXGkWy+f8jO4\nS6HEizuxkYwr1HvgODKtQCZqrW65fEIG7Fi3BPxt0etTBCoih2hTUFO+nT6W\nsc2MPImNp2ruVm+V/hrMNy27lWa2ZUuTaLEgl9Hx7dFE6HJSmj/WCj/qsfYC\ncAYPltOY/ZgYVOY+i1ArFQLFgjjAZktXENyCNYrOMsvszDmMF5YcCZEUmQJ9\nEaveS1rENB/iuevhFv5Qa10DNDcRcHZAS/jg643CL6dqek6gqpsVfmLWEndE\n8QtfGL06NAIgt87JVtkdcv9uQfeebvLCF5DvEzlRe2H3EKhQsHt1KzkWONP0\npwidYymngtjN3t/8Bq7P5MdJ4IDnj5mQkORsTLi/RKqhous+sEqYNs4Fnz1D\no6mapG4u5mpH+QjNKSM+eVI50gI3wS6YPHB/beGCY2IGncAe0D56nNt9md+/\nuvM9\r\n=wk5J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCISLtZ8R9m4exdDB1nm6cI+jaU42Hs9O6yOIxiuuvzcAIhAOEG7hLyH4nQANSTSTzBjNoCXnHw+hHZy+CQWDGJcAjm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.dfdd8d6c.0_1594319155585_0.5821633401087551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.11cf2694.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-ripple":"0.18.0-canary.11cf2694.0","@material/switch":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JkTLyDPQngdlI11k8f4I4z3mzKxHXxTOB76N33wT+D/MhCWonzJscB5wHdnVG1hcu8WMiiJV0j51NND6jP0UIg==","shasum":"c7dafb61ea7556579724a657fcf2e857b13eed04","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4F6CRA9TVsSAnZWagAAG0oP/2C2/bLpaPBYtuh3Am9x\nxX93RBK3CLPrsJl3bqTOkcN3ImvDQ+K2c8a4nGefFMyy/ro6mwz0GAhtSWJ0\nqYVJXKEjFM5RWFz0TjpFI1VWG8Lqm8+ogAr3lY/sVGZIk9DDkMBFK1t7XIZO\nVwzLkop/QmhPgtH7fo/uisy7VDRUO8Rf1v3n3cqgMG2Zc07O4kcp9faNrKXu\njqJtBi/+3cToGS8onuGrhu2jc5pMiK2Y6lUK8hsS0fQWlB430Mr1OeNr/EzG\nUI4Pbk8QAyDRGKkyfUbBTbQ4eU1DgdzswIst+OzZvTaNP7pQdsOA6PeVY5MG\nn2OhZzg26HtzcZbCjiPkwBBGos63q3c3fIlShEOTX5K2/4TbZWQJe46ilEhX\naOSzSzN5gF2Zz2Tm6ebZGdozsoo7ZLHFgZlRxvF5PdGFlwjMVKGnMhR+kRjj\n+gHrfvYIvsdFvdga7VcbMePJe/bEH/RRI5Uxi4cVZrecisBrJ2coVL0992VG\neksUavvquOFeudZwWaXQHE9ZnPPdqc38LM6Jem/OX5wT3nk4xgl8HQ9gAwl8\nTsK5ksZl9AoUgZbgOmzyp5LrDqAMEm+r4oPTIFeLUT2Q+ZlkeHX2oQTYbY8s\nQuwI9wlCNl5ieOMHCpromiojWpa3qgdUQQ5ZX8TvX7pzL07UdjtGP4KW0KEt\nImvu\r\n=5wmC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDszZZsCzy58lGb9Q/h+RKJBnSAq9/ebtOi1wuzNMmZZAiA6+/9uzKmZPUAivaO06gV++e8ioooIqhihddUHpGTRnA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.11cf2694.0_1594327417957_0.5418678458496669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.436d66e9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-ripple":"0.18.0-canary.436d66e9.0","@material/switch":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Qr5ZF25+8AduwU8AsIafUfF2HhyLjf2djhdADk2J9nOnaojTCX/tX7eodBrNhYnPT+ONkeFEuX0ZOen56iLr+A==","shasum":"1042407c2f4b94cbf0702afbedc27f9962765dc5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KeCRA9TVsSAnZWagAAF1MP/RwTFEOgmJrLs+HjQpJn\nGzsf1ShdH+M8W8ny/OVjjX6UG4shtHrf55MrzY+mAp0qZdRIGQbmDZ9SMaR/\nLiJZC9PulmfUC0dLdyzUk7AxWH5b7tFwifxcGsqyeFdxO37oaF7OltQgiW9M\n8vlXzSx+BgCV87PuMx2uPVSSxsSUsdbwyKpO4IqSynbGknK9WhxSXsWT9egq\norkODi31KlJiE55wCSFO85gO/7dutyC7ctFC7Be4wpS24CFubmQgS2HfrZVI\nTEakgqWW+i5Jo5s6Go762gFT0HjCFtNY4ZR3bRbzfNRF54fTUIxE3xlP01FY\nykQG1spgpEocg/NaFDm1f8Igpg+ZPjz/fY5UWDQgGgPIN4GhV75ecn/mx0Hh\n6485HfS71LEoggBikg43ffJZ2bo9W0Srk5TOBWshaJFVEizRi+VsOcldp70Z\nbomzZ1eK4xLgohUlo7R4vX9t7FHQ4rZ0qQr+pBD6cWjlnJ0GWihnMl6zxN0P\nUuvdTxa5VuLTOEgNCElzuvowg4W1jIm3zUl8lKDrD/D1RjKJhp3XhHxNgnxX\n+gTLfQumX2d37I1NeczGTll4AkkV/Oqd1gD8EWt9WIq2Fc5itNvcKtPp19N1\nKBFXWZa9neYYK2hs+VnVLYZedWUiR0h+FWUsX7LrmeNaf5CX4D5eqNacXGFu\nSMAL\r\n=MJAA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWSlFfBeJ4lTuWnzT7WVxIjJkWbtqfu1jbUJGl4nAsagIgGpiPYZG6pETQEB+Td7T0U+9aOTDUL+H9y/anAyanV60="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.436d66e9.0_1594327710323_0.7682398364886653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.3a44d36b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-ripple":"0.18.0-canary.3a44d36b.0","@material/switch":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wxUp+tRyxfJQROp86mF4u3R0WBJovC/9Ext2Obu9d5onfycHVJq2+Pbir429dRUvoAGqYZSXa0SUR/0hdyNfbQ==","shasum":"73a0b399dce46a3cee8b2f09240d4ba9c3ba8b29","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hOCRA9TVsSAnZWagAAdoIP/iwKtAPUOXilP/GhIEpA\nKozMyXA+Is5E9Tx6mNMGymy+DY9H4XxPRqz1U3+NsdeN2Sal7uy4o1SpqLBX\n6i/9Nk/Z/GQ+crpTdckjFVPyjtepDo1D5t5FUurhymmrqMjBjvqS9XDYEG0m\nqC4WtkBFNcd1LR3FDC7Nky2Jd+hFbxkvdY5yzIpJcIAvCh+l3HULDFqYQV8L\n6r5cq0ngCl1uJYOZ7nhSq+glyX/UqnNyV7h13tvPsug/X0ZLku1cQrnFY6TF\npPCP3pxXHRFsoXMz7yBExAjjX+l5LCn45XFQsUhyvjrbMZXn4mpxLIeuyntb\njdyo4MyGH2Js55lqcR2JlxzJMfo35fWxSy6jgwhkbuoW3qgLzkgeSjxJfneg\nF8/ev/RoRZzRtXOs/HeLuX76N8/6+UZW58+nApHvo+eg0LmL7J8HGDtkEzW9\ngZzSmN0VW0jUZs9PJAYUU2YO+6eYSOnKNFAToiu98cZx20R0IuWLbUowFKzj\n28D9m8CP719QMbzX210Cyw93yOFadHmAwUt2dP0LFp8jxKsffjsLFNAdzXMY\n24e6vuaOJSpXa1HgDocaaoYa1w8p4P16fWVzr2Nl/THiCQHgIAwMELshWUgI\nUa9ZWIWCCLCuwCh8mZXgrUbbPYDe1XbjnF47TrT4PbqVp34/4/l7/V7FZyw/\nHeH1\r\n=v7Vd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAS8L82UnUK6J1yFmSzsJUSiU+hlih5fuLI0bRwKq0nAIgBJH/24HqZ49C5kWuVPqObj2RXNooXHJV63VAIZMbbjQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.3a44d36b.0_1594341454255_0.995625300955189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-ripple":"0.18.0-canary.ec11ae6e.0","@material/switch":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-468wjT3SNueYXfMudh3SSzd6zhekfk2lPMhnxlBzLls8fpWJ6Lxu36jykRmem/kASO2GYD7K/WtOR8C5eMIl9A==","shasum":"070e59247e31ba0620ec25b8021593a9849fb477","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsKCRA9TVsSAnZWagAAuoMQAKHR/3rchlf60TTaUKng\ngCLOyN/noXJkbh6uqzhKKQoS8+Sng06T3AQFVBRx1AhbdHzWUIScvf3vG2yO\nNCx7cf8wWG/UmmWKj3qRz0B+NSest+rw9weRQSUVUodGH8n5ZmBWJm1UTIqn\nR9E1KgTTVKkXmS2h+isb22o1Gf/o/mkBJI0bL51a8Sp17+/hktaesMuGMzvS\nmd7kGgqDQwZ5Mc9iKYPgXqDAchp43nvgH6SX+32RebDB8fA6SiyusQc/TBpY\ngcAjzJOcTVpcJLyFpqPkOotaO1bdjBJNkUOW1jvcvGWTJmu4wCqwNkk1EVhN\nq1vW/fiulqgqaqpt7vXoQgVow8YUdlyDT1HBkadiujgegvA8fdIP6f67aVeg\njAYSbnXGdJOwv9ZhR3j2ECOoO+HB6MxuSBmMwch2dOL6b4RNRVnOCkwZe6tg\nUBm8vGWl33ljImcGltmvr1SZOgqCkopF8j2WN2qXnovVSrytrSe/Xe2ZJrLS\nXs4r28MBznWgamephxehjayREtUwiTsV7XYg7ZjZwFtGJ2htSWJakCxGsktL\nDXoh/NFnpaWmf5/gG4U+6fcGv+n8ynnQz+ttQIbc3HupB8RGK6YTc8GQ8RVG\nhnRh/zc+IPTvpke2yQWIu3vNPGwSF7sUTnreP/2XzQqhuKYnRz/li4LTvkFp\nH9f2\r\n=goNL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF5lLZYOCeBxCulutj8HGt5+t3EM6RLuHtKkdcfNqCdwIgAhCyqXZte+mUsVweoaq1aF8VxuUhaaQ57MSkYjC5BRE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.ec11ae6e.0_1594403594467_0.8036991823994069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.17f6cf27.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-ripple":"0.18.0-canary.17f6cf27.0","@material/switch":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7LNqTbNTN5ORuk5Ujwq+OWsF/BSttJs2rj7SCl4heXOpfuUWRYfXoIKDxoJQCZYsnSJR7vcQ25Yor//GbOGUPA==","shasum":"1d46bbbe10df0f5f5d60b2cf1bd660d52b50093b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRcCRA9TVsSAnZWagAAUTsQAJ0/tqLNESx+N9UqGDw2\nBtQhrS+XA/Fle41V0gAXgcxoi2F4XK6wiYyLsNLvhj5ANiSgUzlENenhF9LW\nIasr/OXFrfnA0hztA/LLDK+Ww51HNrJFYQ/0T/nJmNyDI8y5BvhRdjb/69T1\nsH3HcCkRCU44Ndb4CpcNw3zfqyLL1RQRQl2374b3Zf/oOJkPa9HSibo+17Zh\nuyQNOm9nO9ZKAANC0rUyQWbwbJ3OxqenKJwy3Y1Xw+hpTSAqtaXjXT+Hy7k/\nzTGcpb9Zu+LpSrrexrom/QZ0HyJc8jLC6w04iWXeHizzoMW058Val6G6hfr7\niD1P29V3JyNU7Gm+xGEKDc9SpNQXW76+8fm+3qS8S9APbvGFIdGJ3gW+9B7b\nmrzP5o8N/IUa/6V3XoivKr9CkF+0RGXCYtcFC90jcArcrSrAVWnFOgY/0Ds3\nKmaT9ajMq6OQrj5gLDJUZf+J8MgIeZyNoBCfR9Fb3MsaA9PDUu31qN7Qv4P0\nRNxPyHVrHfqHqJvj/QjnEl/phJbvpeP/N0aZesXga1L6DR4xxDrEPmCSIB1c\nqvIj/fdLlMKih6u6WKJg0JlDpbjPcKlFlKDAUb+3Mo8Xl485M2CeJFuaU479\nolt7dRSpFeoi2K5lsIA0sCOa3AwrHzjIPNpToT3ZcQ5hrAPgtmSnaJ41E9e6\nqLyM\r\n=hPqH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWPSC+WFf1OauEuT3Zx8VDnromGqSbTJK/SGrS0+xCuAIgFYs8F/Y+hYY0QYuOHm8DA1ehzbXJNaIYkQ4cSzAoz5M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.17f6cf27.0_1594405979587_0.5427337272999595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.efdfbc21.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-ripple":"0.18.0-canary.efdfbc21.0","@material/switch":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MHe289Zna2Cv57OEipgLZdC+51Q39rdBBh1jZVGrQv3TdpIbAAvkoPKJ7QpYZrhup+w2QZluQ73RpGaZusDeSA==","shasum":"7590ab11697ec8e8f91b9707874a54a61b531104","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcbCRA9TVsSAnZWagAA1PUP/1Tp8q7hWbjuo4chOmn7\niUqT1bbaeXMJG+nypncKCbdw1I1Sy/7nARVMzMsqDHrG7bvCQXEnfmHKvcPv\npvnpkXeirqywPa7k02Uu+a/k1npRcI7PbNCvhk0jT6RGhQdB4cbzP3tO0pL4\nu7nTvG+yXsvpgPGamtVByEFEgyr4337key+6/nWu1wzIcjAPZ/Ry8xu0tgzL\nzrWcb5Ao4Txi9cGHysSI1tNojPvsd6RNDVWazmphAG0dklR3t9eLIwujFhD/\n9eCkigceCnE1DOPazU2LDvoyuW/+CONu+FfkK4kllllQVoFvDYRJKv1mK1PJ\nYvh/eCqJn4rVFIEPXI72N3TDU4C7DMgxBplKmac8TI+oHtW28kTcUCyhi514\nBxVP7ym4wWoexYyk9IIod2LaGTiyZJKFyeW6e13tRdebyD072KzRqdTEo0DX\nw816jgGT+IgRY70fU47ByHie6DZuj1wF7XZJYAnUjos2aCL3Jp0eUnDsboez\n5fxnF5xG5cEyPbUWF6s9N7k87me2tecHmDCPst+FdTOjYSI/gr47omFhenV6\nhsUDTtFzPoAz/1rYS0Md31vUZVbbqHLVFtN5mld2IP+2gY0A2YSNvrY1qwSX\nkqIxwo6BPJnyZmFDlAftzp0AcRpvtdo6xxJDBXK/5TwsS7wfdn54LqrBNoi1\naxLA\r\n=92CE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkecqAf0ZXiXrW3fY25tKo9wIL7dxtHyTqfIB0E5YPKwIhAK5fDgOgsoBybelnShXSMnZOIaAZweu7zKzdIPUy2uxp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.efdfbc21.0_1594406682951_0.4427691428573237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.bae4339a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-ripple":"0.18.0-canary.bae4339a.0","@material/switch":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GRcIHglu6hlPCTSVWjJ6gTnCZ+MZQ2F6KthL4h9EzGM0Y8REE6crg5svYO3PsTDNZzNSRA/u6NouOUEqy1WUaA==","shasum":"29dfb3434a7f3aa0a2d0430a2dc2fc60227012b7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBhCRA9TVsSAnZWagAAWMkP/RQ6szLeM1A/+9j0HREB\ndg8Z+AOT7NOw/gtRyyOVVlMQh5JU+BdQdhrUZlcVFJ7/j1vIDrZySRVcp5LW\nRfmjdGUIze5tqoNUzXQ2E2lUGsCT7/Xye0r9FhPDY6lIDPZWUJqVL0o0rp/1\nrxql3WMGjtAV44BintM9ksE2XX020MUCnqlqbrj90uoeUL1tWLSfNtSJz2Qb\nBKp8yv+hne8KgKl08QZDvf7Q7vU1//LDWpQ/gr3j2hQPJeVisKF6Tx6Sjv2K\nHCf4bDHOtSX8NpCQ9IYLqSEAgxMJeWVtxDpocLuG88bJP6s1ksMM21qPqqxN\nk+eO+dTt3bE1U7QNABw5auBRDztzuw+lz/oVFiDB6VZf50am6lIPHBzP7EBG\nWt/C6/MWJqfDOcBTdd5aF+PK1vaWpy6C7FKeY1G8Fkx253BF333NxGYviHry\nhfsnj2sNZKC+Y5+CW9/g9j7TV+M2ODEykQX4OnxvzXaDoXVo1V8fBbLIjM3c\nwy42wIhBAlKiMPNVE5vIbccrFhY154iwla9vzOUCe/VyA6o1lBArRUpbXUNM\nLlaOJT7fSqlp7pab/BQH8yu0P8jFxeUwsExCBZZwbt5S5G+zTq3LcG7nXKgB\n9GJjwZhIwvOrGJJtOIWNYLHDdnmXRXbti72Aqjae4bfjDen29gB8pO9raKlb\nSIfH\r\n=8oEp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjlbBCjjAChhzFTDBV/7l+CP32rC4paZJul6OH+ApTMAIhAIGDJd3oDrWRh7Ym10VVOM9KH9nsgbFcPVFa9ej4eRDK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.bae4339a.0_1594744929408_0.9302299581581606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.28eac13b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-ripple":"0.18.0-canary.28eac13b.0","@material/switch":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rdH2R20Rt60thQ+m5yUCNDDBgozpFK6Q844m4GRqckeLIxlk2fylpVcZ0ZKNrJvkoTBsRiHO3sAa28eCDAPi0A==","shasum":"6c4f255d2310f09713e83946a6d9396e2f1c6445","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBnCRA9TVsSAnZWagAAeiwP/2U8bk67mNsFGiaHprk1\nRlu1YPT1UmSuBcqqAx9XsLhawLDmQ8RJCadUkMn8aAd95bnILMh0UX4V9ApB\nVASopaVePoQwkxDn7lvz3Hk77bjDWzDpk+ibnDr4r2QZGVLaERNBa8OpCRh+\n3DR+wcTUaEmomRLr8Z4AAUFHF61l78vdYdig6pXV9wrwnbXpoaAexRCx/s6O\n3urEmru54x7ctN3F/ottCQ0v4bkk6g7a/QzpD61YD7wx5WOwLdrtoo3rpsQT\nSXYUri0zfhcevKvOY2lLh5wc66FKYlp+P9LP+VBnHAXIBg73cmObwam0JE7Z\nY8V+FwdQUtYY8kfrgZsYY/eFF/NzN+E8H/loMUKa4hbxpSF6NLnIDgU8zOC6\ntqpPk4Lj6ZHTvYGMXEK2W9+BMOWpKNUDmGl44Xx7cCVtgSUAPTZPuo+83YQh\nSVFYbgC5+bgrz+JnpPlCaXM/QTBMDvaaNWQP+olz21/E9BEJl7c9NhgPBTx3\nScsVUQqEVcVLTXN+yxGpud5lTUAsKavWBuYoeqICj1ZBS+9GNgleN1B0orlt\nnI0TGziyLHqdmwkr7I4GTDUQXUQVYLezBrGz7EDNLGlpCn/c+3ZBEHuX9sAo\ndoGU5FtOsWkYZLkAxHh2LXj3xixFcUku3BI/2Ad+sFaSUWMfdTySzMkwhcT4\n6fXE\r\n=snB7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNqyrhfCS75AHP30GFYYzUn1r5ZbRuf2Jc+UrPImfysQIhAOrcgDhRtsf8czRmBUCHoGmGyruYZrW/EyuQDznx7L63"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.28eac13b.0_1594765414964_0.1443055894552956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.44966b65.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-ripple":"0.18.0-canary.44966b65.0","@material/switch":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-X9k67pdaOhTIpGzNSUkDmrgcqght1Ee0doSe6ykwE//VWWBTtrDgxmTkWDp/VnMCfKZ/fUDcNwObKkos8FPnvQ==","shasum":"9d4caa3235f63515fc4c4b21da3eef1fcdf67fb1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VUCRA9TVsSAnZWagAA/BYQAJJNUBqDAVv4+tr73cdd\n8RCHZUj9aqEkmebthWCJ9qfIL6vBEMkSEgSdGHDWfCQ19tB+kxN9Ji+LfR9C\ndu9aAH0GX+8eNWXvxVQUrJnc97Q5Mz+BgVyfH1q/Snxb9r29IsVlt9tc8q39\nD4zHYLKgGHYMuMNqRSZpoomRSAFHl/HQa+oTUU6w78CuyhAPjqhKanjTAWRQ\nbmFnzrCijS8vINQ4hSUfVG9nQMtwbwnh+3fUtSBO7ockRErB98g5/MTD6RtU\nrjMHAPdiOU94qIafcY0eIr1PFRcmYUnNBmfjCMAxZoiWnAuJEHcVDFHfuIPi\nW1BQsAN1hpiUx1qlOAALDqQV51pHI7eiWex8s/jiX0ccj9vscBQ2q4Fk/BaI\nUVn9AbmuJvJl0mONrS+1R1DRwlis27DIx5fCpgMiLQLcnE8BzqU/pklv1EAY\nMj7zTGaHiEE6w+65ipILCuaKWrauPqdWNw4uUwB0QH7ZWOMtFUhw1dO5mGKt\nfnPweqObV52masrmKPFRLj6K8th5jFk0aCK45G08R3lPjeYqIIHc1k0359Pk\n4FDKSnxzssLdZdNrwMUA6P5Y8RtVXvmdbePPL5RV9hpYROT3QYFN8qeETFp6\nKzCogyg4VOLj6YQyNoE9R4r2GnHkU1CuC51fkEZjBcUr973QRG60IdrgSu+O\nnfSH\r\n=zoB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCY37Hcp1aSC5trd/zdutYv7E5SIYOJV2K4ekxph7eg6wIhAN7B1mX/0jKmFMzIQ2EBAJBMgs6vDot35z6oFtPfcIIi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.44966b65.0_1594836308338_0.4788397750117306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-ripple":"0.18.0-canary.3ef0ef60.0","@material/switch":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-s/9nwiRzIm8G7YUaSqSyYc5bbH7YIKagWvH0xkpj05/3eNJRsTXtI382DZrKL6s9cPyWuRVFq4+9BxCgk2OuUQ==","shasum":"5655d2da53b686e832bcda491f1580ed4b4652e1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZdCRA9TVsSAnZWagAAd1UP/jMXdJqX4R+kEF6EogqQ\ngXDHK+9icwS6WfyV6LMsIX7Uim0++HS232F/Byv2RpNF8/DeB+x1kx0d1zoI\nOgJTgk77jzroalkzkfItcA6wTkkR6yOogkTv26DO55zWBKMvdjA7BSlb3SNH\n4engKyIS7Ns0lkAq+9mFeRTAzAkdipcZAgwh3pnZtUqOnDTbKMZaxmtWGLgY\ncIrR7W23/yo2iTcYBivrruQrt9uKD7d+Z+ZYp4qoC/ynlyRVx3WEY1vTlfAG\nb9NsS7aUjQfpxmfTZV+z5/v89QUB7A/cEV3bJZTJkoFuIEuCOnqiF1zkK6HX\niDDVpmOMcutbks76ha8pjzNYLFsfHU5U01QTCnb1MvjcYlWtLXy6HsIMHWRq\nmkGv2m24blbe65a12v4wU4LPRuCkza4VjvOqJvlBtk2ZYZ4BVPs33UkBLjsa\nKYm19iRyKsYBYMdDQVMjZkk+gmNeWFMfVS5YfgeLmX7C/hlg+q8B4M5/Sdgk\nOYSkZBplGmfNDo5ZA5SJhPA3ZPPpMWsWHKDUz9XPxtH4DeIOVDoTaqIjMtuf\nWeQdTaX2and5Fnleu3GIYM9X4ZQBzETo5/aIoAKizXqH4eBI3cmgYJclSF06\nxHOdb++jBstAPw+F7+h2HP9/rEjo+qX3z3V7zW266cfw7b6rPmlSljtiyWFr\ncopK\r\n=0UzF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwifXQNs+nE25rBkxaudT5DKL+dq25niujb7bw6kJpkAiBMCQ3eYWFAwzrXxi/tUmCh3A4iFpemmUin0H29QjhQxg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.3ef0ef60.0_1594918493167_0.8129462047381419"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-ripple":"0.18.0-canary.fcebf9e6.0","@material/switch":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ANnt/bubrRa1lcB4PvjZrElnvPngjKTgnVZWm6nfn34Ec28yxYM5qp9XHrn31R0svuoHId5O10pVNzkfvYrhzQ==","shasum":"26b02dd86afa0297c091e1fadec6c7d0d3defa52","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZ2CRA9TVsSAnZWagAAyAEQAJPGr9DGGIN2qwCtgWHA\nuUP1+rqO/qKc0aDy326Tk90tL/MvIWZPlVRf8q7Om9NnxDcKx/rCZy8kBILn\npYLnlr295gkDIFKTKeDA7TUsfqsU0a8r8YaOh0FOr0Oeq+ou7QQBKuCCoHRh\n+2T5xTXE/+ysVpzxZVRoS5q5PlePpiKZbDrgTAFbsK1+I5XTmFCOyDaoX7S2\n/HAOFw3TSNP6hizbGwRLDN08R+WPFbBAP6NUhlPXGe7gYXpdjaCo2HFoq4DK\nyfA9ooC8Sw7qmYqAZZT04dwlk9jUWN/Iu+aAHP6doa77ZI1u0UD9IgqaYH9f\nafbZ9BOc03NAEs/72+BuswHmfiG16VJ7E22XnINqxXJJnBmj7Z1nFzVXuqZi\npvyE2B5M9C/dzjuSba9v3qyn9Gkq3B+B7kkOyDTrDNy3Z/bAdHJ6lInNBrxF\n9rItQIvZwkek5ItacdmTjLe16EqrjPSTaaeJEbfXsqCGkvL6DTIoq4S+1zFN\ndA1sPnFUFQZgBQkMXqEWuysYElzjMFG7CSLPh94V8dWrdVt0Wi1t4RlTjdoc\nFEiI5Fs1yOA/zknFnzuSuCmZqs0wwFQ4twUXA4lY6XWnvRENXBUCqBh5RpsJ\nMjE2A2L5TtpNE9JV0waM/rh7M2+j2YI+QX0BUAiSSDfIK5/hHkSfrpEoythI\nMnsm\r\n=zHBw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqI9dcHWZ+Ohn3F999zcXmBPorMOT7uvEWOmwySFKODgIgcy7WkrpliyrZfaYXU3vrwvOurIHGpStRv4VpktYS+1c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.fcebf9e6.0_1595270773962_0.17890826778960678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.b6a772df.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-ripple":"0.18.0-canary.b6a772df.0","@material/switch":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-T1z+0XHaQ6CDH4xX2ZW6vTaKS1oJTkrY2NOxwGKfW5OjNQYJRXPltWBMQpF1C755cVejM0ubHS2PIciz4AgReg==","shasum":"716a1fdffbb70f1ce1b94ff66befac5817f18981","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7TCRA9TVsSAnZWagAAlPkQAIFxy23yabiVb1iWCl5B\nWU54qmnWLgY3SO7Ediiz8M0MqR2DS1M24h5rbQsrA7Sf7sS/hN5ik8eNq/nx\nTxz39prMJbqMxSBu9sIUxCLX4a/1Zzc2LQ78xidYRjft3CY7hD7Y555t34SE\n8ux+uiSW6dV42LaT46Yt+JfB2hfVce8QEP4VHhZ75dtAs0epfm6eP2NcmKNL\ni0dUc8inrRGOgE4aHn8UuTDk5+/I6lKAqJs70+jyBzSONQZdDBtHEpEq5clT\nX75mYIS7+ngNEStfjd9Pu9LItnu6KJXNEUXh4f+rjHbq6xLS1mQkz01F4w9x\n757dCnof6H/nD/2W4J4KaLtYVeyrbegC2VSnXQ106n056nia/W4ZxBF8cOrl\nwfTHZM98flDcY0Lrupdbiq9H2YhgUMEwQ1PZQWDiedo+N6AdBO22nOf1Tjsz\nUELddImt3ZpItY6zCdzojcVaZ0O47G+5UuvQUYonENB2rJGb5YSdP2QNqsek\nfwcEsoMt1KxG0oya4gzZorZK0dmLxmB8eC5TnSDFf3q/pRl/KaBXF1sksDIq\noc5P2ER2E/4MNTTeJ51lpM/XU0mEiSruvmKzsfUiu7Hr2cgzmmypB1qD6qq4\n39ZAGpaGZn1wqwTcpAKGHrZ79C8iFNMvpi0TXY3t1cHZ1iRtTmwWQd8UZi/O\njxH0\r\n=ny2l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaoZdYhkwkJOnJ/Z4Rr3/vDRAhmaN6yBxRucqSUp0tWAiEA8RSce6LI9apHjVUNBMsVWcJyR8SyywlB8vlCA8CcCKw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.b6a772df.0_1595285202998_0.3280300997301757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-ripple":"0.18.0-canary.f6a6ca38.0","@material/switch":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-68aTHsIfthAvMYthQRBP7AHKUOgE6W1rvNcqFs/fmUXD0/7EsfoSbIBQmguUGdYqqPlNggC13GL2SQwa1WjIGg==","shasum":"6764bcb3625bd717455cc171c10bc4234a43562f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqeCRA9TVsSAnZWagAA7CcP/i0XH1hGnN+FgVb8Hock\nVBTX5GGezHNJbQYX71YuMKHspXr5l+0qdBzyQBr6w5gR9hqtV95weYrjb2Nn\n2jxQ75ksrr7m3eybNDkg95D9PZ2WHXESIwJ0VWqvu2ppG8GNn1ZnakZ45Q71\nvvU/S1QjJZQhPg4dx172TYeVzJeGHKplkcZf0ae1zMXkeTWjSPBeNysUHlDi\nbIbVDe1jF+JwZdu049mwYNrVzd5Zkc/PnTt3J4Vbok9bg/UkueLvHzgZIDiL\nryYdFXbMqFDWconrpAgsMXhW+fL6fJJSPSDW7/iyqGA1jgj2a+q/wmcFofU8\nWctzrZy+758fh9lqH4d7P0EOmTAJV8JKbthtYeQbDVQgIIQY5sawRn6dCDqu\njQDiDE52flY5NYs5cHwzj9kjiP7bOe5hBP4dePLZWvjx2Ta8lUewICGC4x0k\nbP7Jw5RQDFd2Yl7VVBz3CPqoQqHX00wfWF5I/yWwRs6O8wTTNc9vupzQUjBb\nRQ8SFKOqnMXej21G182YkapOsizoJy2Jt86/9nUBJUHIxiQfEiJ/Qo7uD0qd\nSfj1koj5hbyxjaj4dS5d7Xtu989mbxkkj/JCDycWDrZdMvwxaIGKGRuVTTzv\nC0H2xtjsgl1WMQxWs/RhCrBIvkrPHUVwLO5uV5jFBN7NDoUQ+RP3saSa+PFF\nUHdP\r\n=x35R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHpcszTPfGMNuVMe+BOV7+aOvlatTEv1tYjp+VJWP18QAiEA7ICVf991Z8a22R5f/1gMEEWxsa8WxC+oDggDxHrFGHM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.f6a6ca38.0_1595349661846_0.29114553383437936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.647dd6b7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-ripple":"0.18.0-canary.647dd6b7.0","@material/switch":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WPa7RVfl6jidwAL7cN6VT6TJ6J4EWXyiJjn42NSyCPrZ2XdE0s/30GaRGgxNiqENlqwRngbfQVTceMPmkTnKzg==","shasum":"72361fc77f3ac7658360eff4a64780cd41b75209","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzdqCRA9TVsSAnZWagAAxqcP/ivJIZuprI32pV5gkr8f\n+kq9doEuDFjEgq3hV6rW6S0YDOc0raFCIkjf7VXPN1k1tyTzpN+uSMcJeVMC\nVl5wZnHl5uoKJD/3H+fnyQva/MXn7cNDy5QjreQHe+JBCMOxz2na8V+wFquZ\nhCsXp6qOPahj+HTfODzPfZWQiSFwmrgXI+sdqhV4eqE8wF6qoSvTlWvIY22t\nqpQEHcGmLlC4j/yIOmJsIZ6CpNs+mj0aPkE0Sxxwbse+OtoOF6knBZS0U2KB\nuNpGyK0WBE3Bxx+8u9iiExPe9Ck3e4FP3AOvbqYhvc+g2AgeVInsAHLcMToj\nWi32usd+HQCJs7TW7mxy7QctXYqWeE485xtHu/PNn8bVQ91aZfOHHi/XPV04\npZ4sv+8SfQV90+KSpd3CM4HGnYvIGAkEV/od7ZvjoVB2G22bWFdwLXbPRk7P\npHYDUzNCxi7cMVgBiMG/lGCswpMY/0kAvrREwiexBsvCp3lJBPYOsaVkM2w5\n1Bgb3e3nhw7LUTYvumAJjb9/VCxavQjf58dxWHe3tEU1+VEmGU3UykHZUQMN\nsNjeXCCB2prvpeYqXgaXlv9Y2f30tmci8JGB25qOD0dikcPwIhqC7u/Vknkm\nSBNF4weHDQWHnEVbgtpo56YJ+MD0GQONTch7Dn97NtZqOoUncDTNgO7+0Eir\nsA7/\r\n=il1f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5LyosiU9UW8+xshkh4L+GK2NcYShQVUz5dMv6F82j9QIhAKy/VIDZBErCpB3+eINUx/d5ccwZUfpBYgTzZGK34a1q"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.647dd6b7.0_1595357033828_0.8326326131672226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.3cb7406f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-ripple":"0.18.0-canary.3cb7406f.0","@material/switch":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IV6ieD8XTKJLIXyhbgZiUE65kivlZp0iW3GEKrB0qoGKm0b+/fEphjDPRDfjXe9lCcobFJDJHbrtezJt9SRlGA==","shasum":"9a1edb56b30094522b1f5d375d34c7bbdb529930","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":55636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwmCRA9TVsSAnZWagAAi8sP/04RoNx91crODhA+yw1L\nQReqvuC8LLc66f1lcIh/LFAU69kwP8S3szAj53FEsrnjD0YvA789mFTSNvR+\nS8rGoGOUwPyXWOBbQbQrSDNyG4DGbKEJ3SpPh89slGatmSXsW4b4QY9tb6kC\ncv9wOXKDXWjvYAD5dinIWntk2UQa7BzGVSP+gJlmrzZjemHJoMY39AQjX+Tq\nFwedEr2iS9YT73l1fvOMFyuGZ5SSsCFF5rqZa1gx6GkmE7EMltZ9yf09ndNY\ndf40Fvpwe668IcXJGrf3L2K/LPHS0BToWTj/+33eKdZWq+qT4sLoAMnMcEmi\nCfSzynES3eMIPV4JL9HdtgcB7yK1qQCDkVYmP58bVh77jmqa3An4hfqdfpzP\njTpJofPMA1Uf5vzkZc4kLkCsW3nRkwNCe5/h7QupktU0WQAM4DRlV2Yxem+/\nj3H33CDclWNUWt40ZHXgQrfvn3Dq6GUlKxI8DkmEZfkbGLSXqKhoUW/QcT+z\nOToOS7RFJf09ryPrndANa1t4xwAK+OOSuX12mgyb/eMJpY5wGWkYcFBhoGXE\nVjFfaI8EHhNooj3HmmZ/jFRNBwDTlA2h4KGjQq3iXNA7XudsS97u1o9p9xUG\n8mP6Q/nePJDur7fAwSGnTcykqB7+qyG31FZW9f9IuQuAwiMe8GquCqEHTNkQ\nrLRS\r\n=qLul\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAf/YdvU1JzTP9FkhA09C5GTAk+aiFe8GSEMW17ksmocAiBjZi2PAlmjFML6H7eDJcPWjJanmJAGNRgBiZfY1xUV6Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.3cb7406f.0_1595444262115_0.13377780049835963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.5717a5a1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-ripple":"0.18.0-canary.5717a5a1.0","@material/switch":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qB5oEqZ7HqcAma+zpuhEdh9AG9s2iuCaN4JY2zMND2HzpA1zlIHoa72dBKn/ns7XJc9JWjtAp3Gl5N16qvuLVQ==","shasum":"b3fe93d0aa085e87777c01e3f5aa42b50fa9588a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLI1CRA9TVsSAnZWagAAwRAQAIldMT1VtTM3PYkH1Rqt\nkoB3hN0rArgopWRoFVBNAEXr2JyO9F+SyuMXcso2YuLNLp0KAGowd440sJl5\n998B7PZJpkflyhQLShqLCRsLoreqyoGgapToC6ungw/uFHJzcxMXPEfty+0B\nJaMzF7n6Q8wjACexXi2L6kX9eHzKnJb/bLK0ZFDDKWAqt6IsvUmTf93JkefV\nHUr5C2F6E3vEjz2OPUMUYzPBNOyPpYBWhTK8ZNzMlBJJ340KyxhSr0XEY1cE\nLLA7niIeg1oMhoYN2weOa8S+2lN3YcXA8KI2GTv78stsBBWPQZZfoTYvFVhl\nI/0A0HWlfEuUmUgRO6/fOjfHFQnQMb+pIrNHjavIsyvMbNUhb/uPFeVRLemC\nghgpTnYYZLWgJy+tt+d4jUwAoHlX4DBEHwqOrMjibn3JtJm4yHeWBEsciTv6\n82Ph8nGheh1V8blEd+o+LY6Ga1ibaVPQK57mZghPqQCLgZomc11UcCxu/uWX\nVmonBonq1wHaya9yi0mJZLnCXPWqMZeMhmfEkE+F1tk88+gfWaIMrbIde1R4\nn35dmxrhsBpTafJDSvYI5FLutXPR5tjk/GIUAjnfeBfvifpVcT3qcrCcNLc5\nyW+cnyMJneUo6m7KdJes8lpzZ1d4x4ySOJBnAVIP5xY3nKedXq2M0WmYxWxT\nFcTO\r\n=fWo8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDh89XrAfZvI5Jb/8TUaGyizy6VRw8HydmisteoFMA1MAiALph/nA0AGgnbXQaKeKFGId0IJkxo94X3WJtv170w6wg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.5717a5a1.0_1595454005350_0.871034523451184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-ripple":"0.18.0-canary.d84cd4b2.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-W1rGvBEeZam2XC2g+uPkPcw669XTp/rk2IkGQjZ69ilYFqKhB2Eg1sHXWQvaLOnM3lcnK2UdUolqe2WpozqBng==","shasum":"3d5b698f835d0734fdade04969a472e2a5b4ddf8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKvCRA9TVsSAnZWagAAFjcP/38AD+jQw9rpnJQF7XCv\niCSTlG2TQHtDJComYsx951tjaSn05emWBbkkYOajF97ZqR2EaBJjQaWdH4Ng\nz2Mi+t1dBalnxnkc57S8GhuiKs8vKBGty6J6t/8OdjNWbIzpY7FM7CVzLQ2v\n1kExrCq/7STyc3DrPS+wVTaOkIc87SrmXGd5JUy7uDRwv39MGJMqbyBV9zhN\n0Sg8+YE3KbTVQc1dUBX/vywQuCtbO8OHCzru7oJo+UaBeCdq5oFDDsp0jEoj\nTwSOz4OfgNqarQ/7Po0tooM6tOKCtFq1UuMWFJJLVp0ASOkYpa1tcPnG5Ly6\nUHMfQIfxAEjw8IBoQn316+wnoUfLl1EcDCcqNXHxgJAeYYbNBrnJGUsj2VZI\nQGOHJA65R9z1x8MqYvvIvoB4kUc+7IfZaE6y4ygyBBkkY8R6cdSVtPO6AoQH\nBBurQGikxK/w/Q3m/MwG2QRMPbpf4yVpoPwo4JuCWPaa68fyd806Wc9PIIA5\nBd/UYBUP+skddf50V3ILNI2oRzBIGPdcNGv+DnhtmwisJLUQOrpqtK5PS7Gs\nR1dYKYFa3zCL1hk5v0ZM5EqXSXBfPgUH8mx8s5QYn0Kae19y95TPv/Ea4cwK\nB3OBQbfmYwdm+i8RZDx2rJfN1nyFHnTC2XaotvNeagw+l4pVcTjKBMFobgka\nb3mX\r\n=N2Yl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLteeoBpNFpv6WxQ/k4Z6KsDcHYo3tiz+z0wPgZtoCcAiEAomMIdBLSVTqhMXYV4aQB1CkjFWMtD9h2ct0ze9tQqwU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.d84cd4b2.0_1595454126789_0.14518381621177734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.f279e7fc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-ripple":"0.18.0-canary.f279e7fc.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Dl8A/cBs4/azkk4wxHzah6xI7iRgvLkYkN9jRvKBmuuMcEqWrIGwJtzOmrm7exz4a3svr6/IrPeHzBT141Ovyw==","shasum":"c94fca04c412e644abcc9df13bda6f46a1a24839","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcTCRA9TVsSAnZWagAAvZkP/1UjwsKCl0vGfea2Rnhx\nHPqkH30d7csAl+9nOz1PnLRP7FPPQRCkU2PbxQ+9Z6FDl1hbNn6l8kwR3npA\nwTcy8HdkYEqFh2GgxBte9QZEc0CBu24GKeXYOqygOFKeey52z/SoGalV9/a9\nYjY60C+aTNJkG3SotAuOunnUiqElUEAuqYV0v9vqW2xmb2lKgiSbrCS1QV7C\nXL3zO9qZToKe15Bmdvg2NatQ8T4EAS1G/eDOzEheEmBZQzLShuIDLzwRqEZq\n2MLFtX86PeENWoOQgglz6B6ZV/t1dMEpgC7qDFwtfEbrlpU7gOEbd5IQFrG1\npIbiPNm6cOYFJWkWtrCnKgmqzN4gDFcvEbfGbemT1CofuUbpEwGSNadFjFZ2\nZ/AsUgathsqmBmPrNaOBx3SSRpVPLTgOqnYFc+zG79BOsuVQX4/Nf16nQcBU\nCzWzdy6idIHyozVB+EHn+sgnPtZ5r03BDKX/I3WxLvRqjZvXx4kaQXK3pZUl\nOgMq4nxBUZF81BGTwnNrt0kgXzZBjJD02RinWzTVCFQVmaYD//fm/ciC/K2I\n0oJv9wNefUbUopbQCf1iRLHXOlQaJ1mPy58bxDvrbDM46TUiMy3FEKFLrSUf\nBwldYboNBTgQAulthOvIUwnhBlViKgnKq75iIC6SPVN7aiNxl93nHmmYkwmO\n1etX\r\n=kKLI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBZ2vMn0B2zKyEm50NOJnpG8UaOYIqpVXKBB5Nqf05gAIgLp3Xf/rGx2L6nFDDVGOLms4KFUUfLfyTZaxWvkZzuOQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.f279e7fc.0_1595455251267_0.602356060501176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.f181e3bc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-ripple":"0.18.0-canary.f181e3bc.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-96WuTvxYm0DaHQezP3fd54z6AsUxbYJjWdW4D5OK7KdCcpY7jnFTF8alZEko/p8hHQfnyCx8UWkmAVI4L/0vGQ==","shasum":"7aaa7ed49a943dc3ce385a0e3d1b6472195def8d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeLCRA9TVsSAnZWagAA8k4P/in7WN8wxPNWuGqyMQIw\nBsR6h7P3C0bLAf3LOv5qnJmwkyWB0rlxsW3sXJhzZ/fAIc9SFDAzmq0vOLCn\n2oTqa/b5AmvqhvACSMwdjHQWdRW2OujiKVt7TmRjPQF1E0Ii8PQ9tBLWPb71\nCDua33KB8wCkhDhCMsxU6K0h5DulBKeJuHM57k5myFC8froggfHNtermP2MF\nExiclW/xBwr0CAQqfcLcTqioplEs3yuAgsYEN1mG7ePwtnay6x8HRgjLjld0\nHoLq6pchnYPMLbKF6JGs0sYPAKUZdh+pkf+oRJST6W6OCiboY7ykvvW5V0MC\nWjQxdvIqkXjfzSTnsjtmyaW8ziqKDZPKK1VloFfeegvqsl3JB1sp6Pa+2sYL\nGNArbuN8wMUbDcgY1l2JUHu2OtuP/LC1OO3GLnURF/HhXDbSMOlDhP7qAuZS\njmbP+2Oe7GNyPscsTy3Ejw60EL+0OaRQYXfIr0ao/XHw6oG5CLM3Shs2wOqZ\n4Dh9WVfjcYV+D2HUNKtv/CQrauJQ7BlPI6QJ6VpuznpRGhGtde8z7APlZjCu\nbtORPIOJqakWQGuMFidf6Hp/RBw0aZt6ELzaawk53j0PQzS/vizsf5s+Iw7r\nUjLrZagzUpZk06QLBvClswkCqydroeADm8yaSFAvdvZ4B4BsCDwu1sXUGL+f\n+PPh\r\n=SwTj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSEzXQhiy6PHI40bn5D2CXo33VZeKx9o4S+BFephol5AIgc2HnjlQ39CyLvr33Vx/vfln08yx3fmOutjVXvZMI+0E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.f181e3bc.0_1595455371377_0.35822121476316116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.346a622a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-ripple":"0.18.0-canary.346a622a.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Z7U2vVuBcGgkkCTqz9boWJUyxqIiLTTUup6HvgvHHRNcsJb3XjLeUwAOjXOZl7kz/ePuxfAMdh5jvbWwMVg2ww==","shasum":"194359a477c28040207e7bf8020c20f3ea4aca1d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5ZCRA9TVsSAnZWagAAHhsQAJY8pn+pSU4AutrORJeZ\no7ehjzw/k7o3d2XZHphZ0vrPNTRU8pj3PDGd5aFWkGdCfS56jShuxAV88jW7\nZWdxeQDm6rvr0SEF2XgZ0/7ezxziDqwUma5BBxr3j4aJKaFi9sNKlYONOQ9X\nmZ5fZW18bknHo2Zc7RX60hz8nrHfwnFj0iYvegYbfRI9e6NzGzFRDQ2lE4qt\nuYZET+7uoWCk60vss5tqcJzKCpv65xMv7A6YgO1rh5XbeEq3/89Tg/85N6f1\nnewH0okSdyBLmOhTaK0YG3MhfDNytj27mvoZfmb9fQHZlLuv8q35ksTyl9uU\nr1mlQgpHL/zR8mVqrVTUXGuMZblYrUpkUCB7Kk0Ti5aXANoH1f9OZkhyfpyp\naeK/p9FuYKflWuvrDYYYHgJGdALoxkOsI4iJRD7pbHkz4yJdkhhjvHjCTvvc\n+WY2SujulNobaMmopJnU2dgv9frWKaOzI8FQJoCY4c9ERTke+5Yv/51CrYlV\nqdGIMB2rIKhlt5okX8YzvfwpoG5frDxAaEsi0FGvRnmB9Q52WxUeMUkTaqOR\nhymHOKCRMDimEkr9MZ1FfQKufE6Ys2RzO8GfiGGj+RoLTY+MuzJzy5de1NzK\nBdBbsLPkQa2gmyvAbPC9OqlSca+zbpA9OhwdGxDyjyCLUNZsNR8yqjmjsc54\ndEaA\r\n=jCy/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQpTdmTn64hwV7DYEw8SqGlu0Q/sv/63iXVPr/wRTbuAiBsqlfzXrtIP9VuIScoE5EodMq45wVK3igM4Y5/UFEcvg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.346a622a.0_1595461208703_0.3379303751294098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.c9e8a848.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-ripple":"0.18.0-canary.c9e8a848.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-A55zCi9ou9coEZbY9q0D0dpj53WYoep+PA94ZzYLJ/hPTcjVuwJKjLxrhsR9LtS2o5IkZlizocuxMiz5leHpoA==","shasum":"3cf14cf3c4c43d40ed26b31b38ac6558c301f7eb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOLCRA9TVsSAnZWagAAA7MP+QHojGESG2ivr8yxIM3H\nBm0QE39isw6gEIpLowARBCOkV2BSDvGkhtlqXQBrLrm19ijwDlph5/Ci8RAx\nS4W+RjJseygip5tZiiw10vfMpINGcvP9jacMsaY9LCpSneXTqLr27NZBdkCk\nIYkVVRhWhDkOgiWmRSXhWjkrOkQz6thetTx8Io9oXnvbI6DYskXnpEY5GCHb\nOPSbFjBIudCTFluX8Z6M/AJsBFQx3sx4SnjijIsSx9jxuXuVJjs3s+vJs2kC\naeHQFr0IcHRV2bLu8q8vMKE3zR1Xq5lB/WCZjISj9VmlqIUT5Dez8G/pTnKU\n5+WuJbwcucT9G7Vg9DO6mg+SXhvBCAXmwoICUH2fQO96XgWndhFhoHgXUG8/\nlpAUCMTcV/kQvsX/8JK3UPfbFr3ky/lEuBKXte3E9ZQ0W1ACd7pyfXgc5QLX\nszESvIE2REghpZzor5sOsj6lrNv48k2Gl2u0cosZMEX4vlX5lCs25P7kJAKN\nUC20iUUnZXIAlpmxK6OkJV0AT3NIVMRyihzUKIy+EgiouNgnNSH0DJaqDkCS\nY1tj4h0cLXnQVt44HHh/WvfQzEPb7kjwwjj7HZRvfFg925ZFtPjh5to+lJyc\nqufGj1h6PbxZjaDSRxXqY+8lhAzFCASKNjOjqfBwDIyewfXODcK1xFHkDril\nFZcU\r\n=z6mA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdItj5OouXM8IVeFUoi6gXMcL2akjVAPxp4kF5s8l5KwIgFAM9B/E159vV6aahzFmATVVccqivisQqHUKY+LIyH9w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.c9e8a848.0_1595466635086_0.5947507749288521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.718c385c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-ripple":"0.18.0-canary.718c385c.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LoxPjF/26uWJJIyFp0Qn7lmThxbPo4/UXK9I4M89OnFwYmqTJEzf5moYQ2Ioeccl0gDFsiPAwcF372A0Ic0knw==","shasum":"4932a3dc9f60b3613e355c550b32d2e55249e56a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3RCRA9TVsSAnZWagAAUK4P/AvuDVMcFRdqhevZLMA+\nXjbgkxPq9NK7VICQIhss+/wUQg//114D92TDMjEO+eEArMJ1A4R32WmLzVV4\nG5CZCYaNGnXo78lww1u8Odh77xYpe8fT/GqTuZ5PqtN3gyD3MA/Gr9zlJ5AP\n7/BbfgPmOvKibCj3DfHqoChLHdG/T2ZnplaV+qc2/yQkBLtiAfXmHg9WBuUW\nXFuISU8/YUP1Pl+ruFGOjPscRYQfOeWCHRWHyntjsJ4nJTlv3+BJC8bkO8Z9\n/t3uEUK2RJPFo6lCKcQMvnMXVbdyonCARykZEetgC0MgFHRa1RAIXfKJT/pU\nCrjf4t4pp9Q+u/HBaNGFWiPu0Yb0cShjWYXMexipJf8KcNM5tNUfC0UnAsIV\nDm0m/9AOnpYKLKkC4kI3VaMj5uKq6p/UOufp3mjW/PkGfoOj+6mVK+BfzeX7\njQ6wp2N9wSVZ1ypcLORgKyZ0hqVXzeYzbrCVLw/atSH6uZyLGAvIHvP4+UIJ\ngYUsx9n4MRTPuhf87moPO+3KwHOZIG8EidSxEsB2ybbR4fOsOXA+MiRV9+EX\nHxP7sQx9RZjYZvu8nqAPL3tspXv/X/aBtY7gH+ECRLNXVrJY1MRwQIa1t7R+\nhxT500ijv5YtlWEebexjH6N1E50ecWwcx4hCaykTERgKZvzJCFhLY1mprueM\nuA5h\r\n=kU4G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWVLvwQtjcYSFw3yKYCkvaJPhWgW4KO0q4XArqNC1M+AiBUYKPBnNVpQUTeTbWxwwnTJlSy86ClrQOV+/c278ckkw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.718c385c.0_1595534800790_0.9724818515474289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.cd516a27.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-ripple":"0.18.0-canary.cd516a27.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jMkm4S2abp9rA5ZQOx4/5EijZojQ9o1Lu89uGIvMEE7NMZseUHaFOFuqDZsiH7lqyIUUk8xoJHf6UxVku7rrqw==","shasum":"dbb6313cbea6475525ded84e2ba7c5aa06877aed","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJHCRA9TVsSAnZWagAA8L8QAJzUTrepcMG5DaYdDH9D\n23NOOiRe+AHcscXixrQ94kifnkAFLYl6ZN+Glz7J3OfnNDdNwrEiwIlKholn\nTpcD97du0g5xLczFxnn5dMHohuCgNYCje4iOgIc9feto5gqbHhir0dUQZbMI\nDUj7la5sv6mUSYlS70vMzGE8/JBkrI+mh8SILbPPl7uiSHycLEoAUnntAimK\nEfv6Y4frfHybLjYTMxj4Bm28LfnEamf4xUG3mP30mnaEhD0nR7iuQMO0y8Ut\nEj/nzi3ugJFgehBILyZh/0M6iC9dPIpW5gl/2JVP9PeWdO1q60LFp82oPpdd\n8oupnfls8PLSAtYolnjGE6kpIp+K99wfkw1RcoxM3TXL3H/sSPMqR0aaQBgd\nUPbDhnBtrKtwU3Xr5pGdX0DNqSn7sXg7WRBI4qCNI6t5O78S1/yfvGyxMyyR\nlNIEQZJbTbQsMdi0EjdkI14Dup40VH05eK0l1ZbsfSuCKdCqGTa8d+iugbZ4\naUDBtnCOrSvaVVOy6oAYgOE3hizlR/WkqyEyT8obYf9MEwYT4y3pD9AiEn7u\nJvnwSCaVe0g/j7ZhtmYAVqCdoc61KNlVul3KFYUx8DWMfmhzrm1FDtu5kiGK\nurvl3cHRc4xp8Uw/7/jbs2tLf4kQbC1Tbj9ye6ymTMFg+GPI/jV95RIfMUQB\nxBWn\r\n=/no3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhBr4Gk7PGKRvP+CdOskLri5Nlxf1mxQwNxMIDMxCpagIgXZ+s76Eh3AaoaUL9HR7hLcarxSJ4UUOoAOOhB2k37iY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.cd516a27.0_1595617862978_0.6165326657732286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.1f082191.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-ripple":"0.18.0-canary.1f082191.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-caLCmgpTeIxu63wnH/J6QBKn5xThCPAQW/grDZGZt9bUsZpGnCTinLtBw261vLrAoPDSC7g2wV5IEKZPNxqo7g==","shasum":"69d57fa57870a3ff85216d42473ad78a8f4846e8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOFCRA9TVsSAnZWagAAHUIP/1+TFxGBAIxvV9owmSg3\nzVzx/wqa+41tSwWqz83y/AA8laNY6KMM8HtjJDs/Gj74AdYygXTX9ZhuQ55N\ndMfZ5ZARIeIifqYWl60+Vt4HTJU4LFmu06wj2k+3rc6gDcvSNtCOVLyVkOSZ\nLpdp+c1UxxsbtavrBhZUunI7f0tOcxS8fPfxZEvcPFkHz7gtDtyz4znhQW6n\nVTdJhZmF7dxW888hoNbTqxXSjFu7dxQHed44EOfpTygRsPmVj8z2Gq8Dbvy6\nTqupDonfncH9Ek/3mN15TwjpPVM/z2meR9Cx/LsRUZP2OtybxmB9VDJLuxkw\nTsUUvgI0mMsHg7Nx+ul0U1N/TXQWRiS2DJQR24inqRCyfCL9CMB21eKaSNhN\nXtfrzxrrI7WngB0j4Qf7OnmOKslzeIXz4KJiUkJwRBhPCdwKMRUFz016ZE5A\nlioJ7BsKTXvY5V2Vd1EG7NIQ3QVk5yQP1q28l0igaZpKsQP0obhm28U5ywBY\nBRheC6Q0LDUg2yjAK/f7xn6iF3a3bJvy2OMnLwwU16p2koa9GflQkCPo5o9j\nTSH0M8j1n0TyCdJ282I4ytW05ZUAwmS+AWsgRco9ebmVEgFFIgWch71kLhQ8\ngig9DKPlCiFiVN2sbqebPWI0QIbtjIcne7tUPXMHFeRklHdu+bH1im6v47ny\norjC\r\n=aftS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcaAf2xEXGXnqI7VdGyPLjwOGoqCUXv91hlwmAFYCQnAiAzBC4xzCyKPUQLAl3gBzYmowMXeJ2BqAGMroFHgoM/5g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.1f082191.0_1595618180635_0.8680820771486599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-ripple":"0.18.0-canary.ea3e82dc.0","@material/switch":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mQXV0W/naGs+xmx+TIp6j+9kIZyEV1F2ZtInyEDZETthdQjsinQOHi0/iuLbi5sxxhKbiWogsqwsfRdW4dIstg==","shasum":"d45b96b605aeb9df62f2dd9fddb63d72c1db2971","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzS6CRA9TVsSAnZWagAAnasP/A8+YkZQbijKm3uu32ZO\nQ+6VSia5n9kasHvCSN4GO5dTZayG+vtHBCFQv52KSK4t/ST5vMFEAxbVbZJl\nNheNXAdKtXzm4fL7fxzYLMFLLbQc0Myk5JNoOKoo38iz0+yUhMyVUwDtN4Q5\nMCSvbyct63w7uz4H5OuMT2adCBfW72J+cauhYEB3P4n2cYldTl/BrYp+xkiD\nZ94Mxcqpwucg3Bd20fkAxOHEOS1OadvMz0UpnuEvXon4+q9W+oYxMNYXBbZC\nkPUgK+LuSLzDEE/H4j1oDKgetcKCfilLagTnxmlJDtGEwCuCJWbXS3wm0Ctr\nuVWFPhqdUOgsPFVMIPGG6HeujhpDJ+gY4PKSdT97wxCE84lFUxgtJtcRZ1LW\nfGeWJXLfn08vO48Q5wrSPJO6TDgpslVgt/qtJakY+p1kFjF3op76MZH1lQBc\nrFreghWlIkmPdChjAkc16x2HCaSNOhGqEUWWU0ari6AFzfMpDTSgkqmtogEE\nje11R4hFdIC5zLSoedNBVU/dy7lvjVh+xCn3CY8j3ZFRW/yKftXFX1X1otkV\n4ha40gCa2MYTcyS743JxOjJZH7JFJ9lPvMgJjnZp8NlmiKoALpnwIQWXG9Ud\nLVv0oczy/ylkTX7nNUHkUUPBNiYmMSjmCQuy2n7tONwwRqCnyEJSsNphTti7\nwWhj\r\n=R3Tn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDciLQ1J+5v/7oCBTskddeZwSJAoyEukA67x7xElDmVDgIgc0YhPKj0ATBjrD1Ul+mK/OQ7SkdhGv//ut+LPvgA1zk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.ea3e82dc.0_1595618490188_0.9957968293509762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.94987b64.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-ripple":"0.18.0-canary.94987b64.0","@material/switch":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DZ+ah9UL4IrIdCSxmWoGnGvmp/Dmo22wqsztMukwrCghgi7wthHSz4t0hRr+214HBIv9jfLnV14dPEPXNymvaA==","shasum":"d1cefa27096716486774be536ffab33df9468833","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QDCRA9TVsSAnZWagAABXUP/3wjsLfR7UHHQufXCH8+\nz9jACwyUlhCX97apTtc0LLjUTC/FjzF6+BG5/FZG8pEnGlPlgtAmh0phFk++\noYIvPepyUCmaliwyBkB7CoPCa1M6qyaQJsZBM652NOcNqrNmlyPXXlJ0oueL\n3ipN1i6bzCvyR1KfFUpERhxRUDMIu3jMgdHoPomF+lFUG0M6LMWV0DSwf0Jy\nf7ZYGET7j4KB8zcLhkbBTO/qqH8JtnmpBqRjNCHsL5wAUUFMX4JAUIwVOXX+\nhhjU/ez4VQiJ5wlSK4hMzDP0ZY5JmbyMrpE3ciygew0F9VpuLed3Pb0b5zJB\nGC5zt0WWpLf2oTIubIitAwvJnVrqOEwB9FjiNwX3zmkGZi7nsDanQDnMrf5T\nBIjDQDR2URFQ6TEEqoOlOKcp8bwykyqbAaITlt7SUaFc7pF9K5LW51iShN5B\n2oo10GdtjawaLCCE4aSQqMSfiP88hZ07weykL1UP+H5xAp2MLctTSEmCtzdv\nXUeC9K9VtJ4kf3Xz+i0thLWawI33jqqRPoiDGubNvr3M9egrVHmZuZC/1ohv\nC8muCsrGCZhMuk/eYTvtTC9Uv94UU8CexUWdHhrVTVRmFwDlZTsipQ3pxa4S\nQxriVwM7wD4xiV2AVgleqamc3sxDU69CaUWs+IU9tIwspo+4j2XExpnmev2z\nWUdv\r\n=UUwG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgVn93E0j9nz1yKi+rNDdadBXsEuQHEIb5g5IrQubs1AiA5NB7/ymdgRKS1SHeYG58+ORHd2uXT/E146YhwLC+nTw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.94987b64.0_1595622403025_0.5655853307290755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-ripple":"0.18.0-canary.ff49b7e2.0","@material/switch":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VuxIR64dJc/1u6VBJnCfvZDG4s3HMrSuIOO121OxD3RiksKeAm9eJ0yEPsnRUHQ9/zDT8kp1wSmwozsyapYfGg==","shasum":"be60d0ed51311b306d40c9e53ef2056b3979269f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVcCRA9TVsSAnZWagAAwzoP/2Jh2aRtqCCXisCpGCMN\nvUQrqD4DvuAc6CbmyEbgiOldVMXpSDUhvdRoNX+SoM1mzIgQcWkXsKsKvoE5\n1cH2Ov42FOGyWMBlrtPtKuJVyXzWEayCbAx2AsSCmfce/HAAF4JBEZI1TyKX\nT9xjw9thMiatfTaRNmlh7jXBRBVW023hKuTdzxsrr3RVwAZdrzLVFs7QnYgU\nWeW4iMdR8cBQiPSLzRS/A5Ll16HUtBQaP75y8p7XdWg766O7rRW8koP1XcR2\nELKxr0D2nsOXrbqU3Y8DCJ2+j9niOzUuWNMJhEHgRiW0Kv2qkPCWBN600BFN\n/DY39YQwbIE6SDR7nxAlvzNxyT99VV5pF5Nx+vuwEiCGBpoDLHKZP6I62z7S\nOGBGddaE/J5JhrONQ4XklLsF6UCMGpzbZm5PTgBtOgFnyge/aut3vKCBUE/G\nPsbR6xXjHID4KzopSO3BtaH8QpI8iIaSuWUMUn4PMdyOfNqJGFwu6cS3V2T7\nglgmQCwv1ybinTF0DVEYvxAf7oP9vhEu5Ai5Qc4JPbl2fSKxgIZymXvGiNxM\nSKor/VuP97ZZbQ/pcTMDpBGYXrDcNE8eyV5nLveu4/0/gYJOScP13SasMrb1\nOdy4FPlMdkGn+LHxRa0AMB00TiyvU1F5FuTRtSYvofc971L56YTJU+H9VhQP\nvlDi\r\n=Ob6n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxfivp8hqrHWTXfHSVtPxNdxe+6Zupa+JE+izWW3gMvAiEAqwZbW3JBdSJ47PwslJo8g1FWqxCxK+/Z2+WSagije24="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.ff49b7e2.0_1595876700411_0.21995757867779253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.3d334ccc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-ripple":"0.18.0-canary.3d334ccc.0","@material/switch":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2ksOQEHg4rGpmhMpmy8uioqVGLVNoJgxfE/YWaKyLalzv4l+z+Y3bPsDS9qEdssF87jo57OHMcMffwHZX0xYPA==","shasum":"4639599cbf846db2c635f3d138a26b5390fe2444","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8aCRA9TVsSAnZWagAANWMP/2Z3nOirAolouZd4TfHu\n+UxlLI9eoaEPxGiZZvzmS3pDjnXILlgvk6LZLRn3wtIb28efsUqKzILs7Quk\nLIkUhAEzHyff1R56BIvl83IKfgqqystAvlXkRTnHTPcsXX65UQ4eVQmOQx7Z\niTdp48APRhTVaN6EXohaEoT9TyPo+kgtX4x4c4lJ/tcnumtl7lxxzw08ShJO\nol3etedyYwDt3+JdyQPx88zxXc7zN49guM5FI0ybbzMqoIdO1M3PoKMFwkH0\nq9Jb+8uxWKKo9AwZHF91gnopHagSWojFzkvbnf4nQvJGbtb7hpIHabGA9hgR\nJpvkXhpnqVzL/MYPs+MmEtBMkR2CiysS1nD3afEoxwRGI8MLUMjCrqUWvXSx\nvGAHNXXZ2N2ye66NFQlX434LDD8BEv8c7NwZTGpN5gK0wEe/qv3SYqzIjySk\n89lKRg+JuvqggyMnxx5tPhnlJxuWa1xvfOR+UZ9QRgUtAbbcqGaNk+nleax4\nA9DOulMsGfESLJiCIGl6rAtWop9U93wrsup2MUD1OYB1FUkLv4T8a/01kP8E\n2ns3Y8yNgRcN69rbSopjyI885MF2TzOATJtJmqimYP/Gxhd64MXgbm/kJXMC\nDdnDSMhkX037p1a//RfABWX5fTzyNfpndKUuoAjitVSxbwaS2R999jkpUrp1\n7BFx\r\n=T8gO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrsYWP64LJyHqUCfQFytmzn+FwryilvykQ7/bwWWf6ZAiAYbxu2kArpJ1FKCVAq79wrM14HWGcVG6vnxFg+nSMkoA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.3d334ccc.0_1595952922369_0.19232913648000882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.82ac569e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-ripple":"0.18.0-canary.82ac569e.0","@material/switch":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MPS0DEFdoolv4owm+8rN1gcehwdtiICVdp6TyKZhl8hC2y/Cluufx7qtQtL7Sql8OX4Q5tCgG6t9To7FRpHjzA==","shasum":"21aa58c061ab0d6fcbf696686cae0df4a7850240","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGeCRA9TVsSAnZWagAAJM8P/0sAYb7lIjeR6g1i6VQ6\nZEE0u/hniD4TUYv5+Vetz8fndfoSvpJ3CC0bw0EkjmWKqChe+fdT2OG1WlcF\nq2phYWavSyg+SFBQk6MHcq6jIKY18uMsybGQ56MPhF+Xv3BkCOrmZqtZ8OAQ\ndzWjOp3Bzzjd+CDfDhZJVu3DnkoI/M8bItPMh3zCnmPcHtcf/2noOzZazbjk\neZVqC7dwDG20CoSQ6zws8ufqySAaMVvaymysoA+MOAodpfvl4+nZAPFazlAf\nwoAthkMxzRsLfgD8Ti7jpkcIC0G6D+29D7cL95PcXVDHlt8zT/BiczMIzcKu\nuoeuarepj3cSIuLv0kGpPceA+BxgObdR8LXdmivrDGOUUdreYiryEUMx2s9u\nHAE8IZBexSWgxVWPDX+doQpeSIpQ4GNdQ21cREOw5EGZVso2QdG+G2fY/oFm\ng9ARFHZF2PX1IiDcwAEhJ9clarMzrL0r3OCqOtaKZD3KGpdkvJ/gRaR5jCnv\n27/NNjHmYx04esj0f7Knzf8kocPp6whonTjdhfglrl6Wav/AnFnrP4RM5pvq\nAoIC/T4KRrgv7SgpKdOnM6vM996oFLJjN5Cxj6YzJ2ZbTTPh6e6DP2Jj2jOS\n6JNrhsnXcw1WB3YioS/N6DVSqvO1zY+W26J7vsodWxHuwOjOO8sdPB76WAai\n/TMe\r\n=q44K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEahT8ILDL2TpiMtB7sMl6zaaAs6Ymugtpa5pDm8cufwIgWV20l4n447cQNbdFFAgZTCVTv75M3jdKaAZWyxSt8IM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.82ac569e.0_1595961758221_0.3808649991624604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.99df7397.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-ripple":"0.18.0-canary.99df7397.0","@material/switch":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HQP4/8R5lfSaSJdK0Od/w4DEMT9CaZeJmQfGMHN6D5DWo6oNPhUWFQJ3gGFbx+dB6ha08g8cJaXOj0DYSnz7lA==","shasum":"fb2c792665dc204ff9430cd3a763c8a6afa12887","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGuCRA9TVsSAnZWagAACY4P/iIAUy/azOm0YHIHyLOx\n4M1MaZQblfd14Zow3lgVuYWL+trtKp1EFRcNGuoyilH3umRQ4EwjEoF+WKkc\nvSwoD8nj9MPD0g7nXn+ZFZ5CqBA9BwvV+4u7Z+5D2JKDG8j9arNJYcCxGrdD\ny/rpgg7aNhss7RDKlRvijjznJRm1eH8K5UIyI1KVu9X659gSZkwKwTI/uGEC\nhzEoQfKNAm8vr2vy4GSsgTdL8MzQ8gjHVevCmCdbJ/9kb96+P+rkMhLCRmUw\nBV2pDIVTe/15RQlrob/A2kEoUP0+xPbiqngqU3Dt5Rs56LNN9bMUFtsbyVok\nJLmkBvFV2EG12fRS+NYYCGlhrDghDZjCcpyN96dN7cqCIkfxxS1YWK3WVxsG\nFEZOJ18OEnjLKU4pjWWmezRNHETs/CsSNKjnibsWjrqRxptd01Dx6X9mcXRr\nG4UqLbY+1zTqLXz07g5wbnKBC3USiXUnB6ZlHLuPn3b8myUrzKPTXLFNW3N5\nxQNd447h9MlVCUvixX3twx0GPf1n5lYzSM3ApjvIi11BJU5WgRyCb1F+VItj\ngxVSluFdbB0QpVXdmm8CuUOdik6wZeo1qYR/9qdE9rl4N9OwMfXiEdhaU+/P\nXhHb+4zzawi2R2gmr4G45Mzab52PbJOj5w4EDNyUr5kkLmT4Cg5zu1b6Z1yT\n1lho\r\n=NdvR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWzniSHnrlB42QPXS/Nd9hyDZqSvRnnLdNbj5J/71kqgIhAPTVFmNL2ArDD5Sg6m+QyHqcQq5sa71g0kgyb9ucIExc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.99df7397.0_1595990445659_0.2038624100744002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.45493e05.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-ripple":"0.18.0-canary.45493e05.0","@material/switch":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-q3SIALIdgHejnY11NNetO23H14hxA+Uo7v+9vHquqodtjkU4AVYv8Npe1DY7Kx8GSSGSJB3EQqxwHdbJ7wiiiw==","shasum":"8fb906dc9e850709d107ce3a109559f55b42ed4b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa8DCRA9TVsSAnZWagAAHtIP/j2jbDXDz2xpi0LhRhGp\noj4mxZY0sPVKVlX6ykIYSM+oyaz3nu0DvvtBOQsxS4gNP0HU37bJ3svkd1U+\nqcCruq30tI47TYqQ1uIJ8MEq0CaYcCOqIIB4FfACNVY3wJw6L/PBDof7N8al\nb9vNERzlQDQI9tC2SdYN8jjp1Khzgm28L9Ag7Tr/4Zbjo2AFV1hd56HHnz7e\n5C0fzvcL/GClkwtfCPhkdoNrUMMczDOqSC8vPSHVwi3iB3gjcARsvHke5j0j\nSdJRJzWF7iVgIXsU0dFHMjxPzXCRKM2ckEussOWtL9gqnIfYa/5IhvSQ4zPY\nyJ9NsTIL9L7JPo4y2y17615lpaBfuE/2JDtmHTFnjG0gUr464xZiA9kmS9Es\ncQFXll5uzBBGrXijcb1jQ3L7ziGvzr+OZr9mfpa8JVQkLT8Y98AftvjqFcYe\nCgvEDiGRU1fnG2HGzGdIjzKgvXy78Lnff4NWQM3XMyS5mK+9tvbEzoaSwwJL\nfUN5z8T3hLQgCYOrDavXb8E843kBTtadVl1rztgAcYyzRpcl1CkNvDGCQ0uV\nX/EblwYFqAHUIErcJfUdfzC5eTG4WlvpmQHcvkUWY4GUl2HIZakcC5HBGTGC\n/EjGVzgNvRBW3rRCrIpN/YSbilnxGPCCTKdgYq18HeiugUjWgSo5A6OSOdrQ\ntuiA\r\n=mkB2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHo2Rp0LRQx7DkLGlE7yt8n3k6aSmczFqx/3gA5Xo2joAiArIPm0byfoANBYdPMzLrjuJB6Lp6Q3XhNhHbsq/vOL2Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.45493e05.0_1596043011093_0.2867809708928444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-ripple":"0.18.0-canary.f2ab0a95.0","@material/switch":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RC8Q7PtRMLmpJAuX4WYJK2POIdvoKaHcE+JmptsydT1k7zy+YJunu3IRAIYF8bqZXgEikgYyjPi6POMILyU5LQ==","shasum":"3a51263c1149abb1c35cbe28b40dbc8a56496245","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAlCRA9TVsSAnZWagAAaK4QAIBwWIchHpRy7BhH4I66\nMaVlLCm9XY7ee3wyr6MC2SCZzQcQZ4Ob0hIRTHt4Vla6jfAqj+YHbCZzbMM9\nFDmQEdMlQ/qO43R6zEZz5hoYX0jeXZE7qEEjB3zLPB+xMUQO43fZDwap/64d\nzIvupSkSo0je2WmGGR0JujkjAGSJIaEyif+IfJYQXrVoRUJLr5Lp5wQ81e5v\njKpAwS4do4qz0gI6084XfCBJ/bFDXA8NCbwRG92C6Jxqc5WE433+ETHJRr2V\nDTx3wdMB8G/mj3OPcRhwyWbTI97iMfGcDFqQZAcxM09LiTJlx8mpp8nMC7rN\nlWz0iUngbleSfFgjkFZ/dhrF57GAlWP3hQ8LF5sBhSjWwHm/aAe8TCYPSHAX\nXcPuXX/tS5gDULZp5g+KeL2tQ/ZjuWsWipf5jki6IyQ4gb5YUvXcQpbkDNMz\n//MLx++D4Aru5bTT3mTYlc7hZPeETprQl6SxlRmC5iCkf8jy42AGiCqRP9eC\nWp3o3xvA12PhKxWvS5fi7worPLvUFTVK5XqBysrVwiuaWGoU2+hsj8YeFQx/\no71LliMxt7on0k40jmycSw7/NMDwBgri5fsHDqnFHfAhxTUb4+sw4VtORv/R\n7ZJtPiyE2V7xS6KK9xCA/TwFSroaY4OSoNKchY3YKEJQjmbYMKR/b4cKzITI\nWyIB\r\n=2sSw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw5EjXeo71HoRt8ZvcuaRliuGvwUAc4MSbjufjaSjt+wIhAKwkpTAF7fi5L9PN5C26vTnyKCakSiwEqziWXv7DNf+t"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.f2ab0a95.0_1596043301228_0.9348336172293275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.45f9eddc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-ripple":"0.18.0-canary.45f9eddc.0","@material/switch":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k2kkm57i1zWSXCj4CbzYDhXLdAZnH2XuliHh/4V9td6cJAes00vvTFWo78uIV+jBbXI1j4VPjPaRlSOS0Yx2CQ==","shasum":"1ee6d4e9f21f9ad14222b408be056fedb232f7b5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpnCRA9TVsSAnZWagAAIH0P/jI9a8e3iAtBsPGiaD4U\nrVZ0pbJkGyulP2CT+61u27Pkfx363KxeX+dAjZuz4AjbQGl7jPceVMc5Kysj\nk4mYIGUzREhmmyt3zsB8qdg/6dkVql4B4Ta6OQ5PstLv3XOVldkzPIUSWH6w\nPjq1R/eZf0lFbrpAZ7bG+hC7wbEAV/sa+IC5fwwV3w/IRM1ZqSeqv4Ov5mRO\nle2znN2uKnCFebinWRZ4f9pyFhkD54RMJOG0/LgYzR4YLGn1mKaiEk5vwsJ4\na0VkM1FS0g9tbVU3FRgkRSq1E+gm3cB/WJS8/qzSlAfdIn+BH5ZHv7B/UsoK\nT04brolVFcdKP3XewqJ7rPpA1BuUHY2t9PsjY3wTtSg6QMDVeg2n9nGPe311\niD1z+L2B87C6hbTiEFehFfXLh235X05heXT8cur8FgI2v1oaI1hCiIKKrYN1\nKcRRnIa+JmrSPSpgasyyH5tKCuaGfxgkiMuURN3qxx3pn/Kh5d9Rgboh3B/b\n5NMPGAYQJWRaGaAIan6lrAv2zoiG/comJiG0TEUIT/FqssyjAlHhWE1Xx1P5\nCcFsmrixTinTUhcVQ4l4FmKEgO99YLMGhW/LdDVnIo86Qnlj6EYyLtIJ4yje\n+X20SH0l9h+WxBmhJw8OqhJ9cQw/9ecXSq5uRbnY000rELb3V1y6UCacThWb\nM3+O\r\n=GmKN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd+8wSWNSgg008fKfUKBgmWz5qRNaBIrerJmaP0gPGogIhALQk92pF197MEDKpox/HwAZKC0yR2qf+YMZEFp0TF2Oc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.45f9eddc.0_1596070503075_0.1617377026406397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.b64663ea.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-ripple":"0.18.0-canary.b64663ea.0","@material/switch":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9Kby5h7aY9cfh7ZmbQk97kkyEvMwX80xABoRoEQuvoOB9e14n3+t3zxFumGwd5iaQTGghTrq13bAGU6xerOzSg==","shasum":"42417fd8308ed68affb17a16d8d91e5689500cfe","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwa8CRA9TVsSAnZWagAACIMP/3Yi1UwPR8bL9VSBH2zH\nOg4v9kB9vnjrfw51LckvootyFg3pgIoMr7ynt70TGp+ex+Mw0rDTtJEcuB3H\n4e+zDbQOlcGuI+JhEmYjlrPWb3KH1D1zhL3V1haQswdgmt2mOWAXc2tnHbck\nmvexLafDyAKv/NLcRS2T6zVY/iiXMjzu4QLvg8pEa8nKsemyakBCHfB+jkZR\nKt2lT4MvYRvGYFPeCnvss6XEiMjLlR4k8wabEOQWfVMxMOlbHVv/GH6NrnhZ\n+zilgYVUH6/cjIeUTSTulpvL8i5xcLeJPGb1R9po1v/s7D/hDNJmjVj4WvWJ\nV6rL6N6sq259x23N0fWBOfQTGseHpYORcrEZYbvU523k1uDYL78B9cIjRWix\nTjGqvtF3+klyGTTHqfxLjHOjeI3015b3JN9/GBLIISFvxgu6afn+xj8H4e4H\nvg1etGz2Hqvs4b0JqEyB2WYQFO3BX7arSXmM0Q3cjAPHjfHqL5byrjDgix9c\nz5IHKefY2rmoSxNvPay4qvjZ7PPHWOfN2Ib/oKbqxiQY+VuVSY6iVb2TGC6O\n6xG4UjtRO2yXOL97r+XP124k31gO7X/2gWugXes3F7B0rmnNXlXwtjFY7sT1\n2+4Kpln/0A8dWkZvmh+HnIQhtJKVvw9pbeXFb+w8EdP2eL4W21VjqKXHxgic\nzNjb\r\n=Ad0O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyNEBFeVc7pZF+bbtsAj8cgkrD/HgI5e+vq4ZMlUaM9AiBvUyXSBHh34nhDtJXactLZDMU6MhS255PQB1sogrws8g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.b64663ea.0_1596131004407_0.788867801040644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-ripple":"0.18.0-canary.9a1a4d2d.0","@material/switch":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q0FFTfEUeUvSFJ1TO73ad4qdlU4a4PukCMUHnBFFSaXFAKnjoK9BkJTvG5ImU4hbENDP0nuIgSr8WR90J10IMw==","shasum":"76dbfb6681f8e3255bcab87c2523cdf793f742af","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXXCRA9TVsSAnZWagAAezsP/jbP+dPilrw+hY5AgGEl\nHb9qPcthNQo19Tzaky1e/gzYQtd3t/KgjmtRO6bBHJNomRTxpfa6PuUabLcv\njPTT3SDieVMsfNMO5xueG3B2SvzMx9aJZXpP2F7H3TQAdQ9ES84SwLJzuRMV\npGusVt5bW0Ty3IpS0rTIAfMPWmObAUYf23Ej/hB9hqtBZ4JU2Km9L14mcJx3\n8s9A6k01XiONrmOxp9wmttX2opIIJegbQTt8L7CZWc8MdeYrpl8dqByJy6jQ\nnNY6OcP+Q3dR1zcyaXxrU0VQ4tWuxRxeJ+hq+/BNylmDDSGByP7fWWS97jsD\nHtbw9D9eYozbIAVn4OJfeJhilXl0rV1by6ferujVX6aRkmOOJogjQKc34gXo\nCLlgaMYIyw916xBiAfTuZdDdDZ9ulRYAT66c8u5MCAFMwud+vltc7iUPS/do\nWGzvK/KPOJUTbjp7HBBtd+ch6ox4AVFRbTF3D+zI/zNA4UsHQ5xsc7paHyoD\nfJBpKi3lEmdh6UeH3CUd34I6IiJWbWfeIITwOfeLpNJcks/8j8z4oG84mo/8\nKEduG5LaKcbQ3eCRi6ppx35GxxSVu6RYtXonWID6DRI18zPSxkvjknJDs4xu\nD1XeQYTmf1U8YR6ucWq9TdpaoTOLHx6EqkgJMIJeRKLOPpl9jGIKofH1R0tc\nDC4v\r\n=1uP4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDA7QhKth7Qpmr9axLI1KSf0R988/w6hC4elAEKjLjDNAiEAiQt+OIi/pyS/0gyQljuIgXfm+7udv8MIlrG5ICEVRpw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.9a1a4d2d.0_1596143063255_0.6194692183276163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.887c2848.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-ripple":"0.18.0-canary.887c2848.0","@material/switch":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tV9JNXfR7AO0CWRuAy1iLb98zMVw1Giyzp7umZG+WtNjnZk7u/mbLakw5EWEtozsqVKuYz7KKIAlOxVH3JJ5xA==","shasum":"db20a0b7d238110c81ef652cc249f43a8006b98a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0Q6CRA9TVsSAnZWagAAFfUP/1CK8Ngx64VlISMkMsbx\nHpg9yMYzz2mfG0tReUEEKUA4DnbDngeY1i8bUukSVtrP1urWFE8ssZWemieN\n/bUg5cBcvMG71FV6k6SPICwekO/DJit3tT5bmGom88ZM4oIPhXK+7GgP5oJl\nqpFQmpNPuVwA/JBdEiMlbtjXOLvPrE34kAcchq+9G64+MF3PN4IWLKAVsQN4\nCZCU3qF9Yk70y4LBq2phCsWxrMxanDhh3YfzVcJ6UXgFXeB6CJlTAjSo+i1a\nsTIIDmRgzvrqWqXf4yT5oRsGhrGasjkEkQzZGBjzy0q+2s6CBwicqyqRJZlr\nDhxRR3/cQoKLWVYOyi4YYyM1egGfsmf5FAKKS3q4QP9DUPSRe3i0Ux57c5kE\nthAvg9ZhW85Drd3bcAAfdO82vBlA3vbHlSG/iYAQID4xMIXDvibD/z8lYne0\nsEeA0EtQNxdimcfCxj8oQIJ0TpzlqhU/ReVk5BAq8Ch7nBkHJo5ax8dbCzat\ndWAJmcOcDpkaP8eGIdYy2urCaWT9hQoaT44kiE0X+9quR/YPujxxALS4mvTQ\niEdZQKooHU4slalWASxqyi7/E3E02/5zs3KNQHNq7IqkbW5b6k5Zj5XkF/1o\nS2KIiIWIBn0QRB79GyIDPkjMXZ5Rb79Yf98Pr9KGwV7io7T4kePSvGUAakFE\no8cy\r\n=LfXT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1r7pzpHREgVe4fCQlyMqtjf0HC1Aaa1u4+l5SZ9xQgwIgd7Uk/niAa+RtG/TUhz5R92ckUXMPjFE3Cr3MaY0L66k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.887c2848.0_1596146745691_0.2866527827992109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.354eb695.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-ripple":"0.18.0-canary.354eb695.0","@material/switch":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/sz9GKrZ0t4+vbnhpJozVrugal9ssiAFhoWCsBWBDs3CUIYpYPfL8E3yVsgxU83WrOQQhyQ7UMY+XVTo6w9YIQ==","shasum":"7d86d2bea551f3d95e014a9690e40a960d7b6f39","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16LCRA9TVsSAnZWagAAGVcP/3799ptj5St+8CHnNY+I\ngqefCVzjp0jWQhoJX+6PDBbkfX9S7NtGEDI+xGEyjta+kLxLid17zZcnzDZI\n7tY8NwXcIQKt9dsuo0LEoi/XStOqbHty+3fEBFM3YA+Jl7lai7t9EnirRPmZ\n9KI5r9B7aqFe65mzNTe5eCwKpqXGU2qktn9LUAm3hTazk9wxvNCXIXwJyKrd\n0IkcVyAggbiuYy7uLnVSIrvnbXAgPnZn/cwptEl1dk0SNyL0gHmsxzi4+WMx\nywjJ6D8vr3/ibG4NgdtGDLpMjHn0PgejJ9hHsr7EqcIPNFSOsBiCe74GOcdt\nYkEEyyyPj6qFQMu0KpZHcX1AgigpKu5IcWsKz5HkTrVttARAD1D5Fls0ssxs\nr3Y0AiRCsMtuhfOqdlcRmqvm5BU3SB6ZkA7qxt0dj5I5UmZCU7G6Gv7aQLK2\nwNag2RYEWNThxw8QlRnqNoLQwEUm4vhOrIcYQshkbl1v4/NcZGRJbwbyvM9C\nZP01ZSxOWcBKxVd6M4HKMC8IVLWmfDKnHHIjfSTtWg5fkIc8vcKxnVofirRD\nPJ2IUGmxZAnhWeBhzaXr7FdwKLlTV3/l5nRIgdFLUFunR6o/zggsYtreN2AM\n3p5I4JCi37OcEpHk+q4llSavmgktim+0PBvwNrjgfvfYokljctLqVL6whkBQ\n45Qa\r\n=wd2O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDphd+1jjUhdHKEu2qZe4SEJlAmaieqljr9JcdPwdgywAiEA5EXedOgFHBzHJOPcmIWKvuaxVE8mBRFhyjU9c26FPrk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.354eb695.0_1596153483112_0.2841368818363539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.7beb236c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-ripple":"0.18.0-canary.7beb236c.0","@material/switch":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7kvBADYSetnmOC6oyM0k2Nfc3CHK5kPhWFxj16E14BNYfE9dz2vDj5bxhFPD1n5XO1dekWYMVf3Q8cXoSpxt1A==","shasum":"b8f082983ab838d64389af2c625e0603b1275a39","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFedCRA9TVsSAnZWagAAiykP+werJE7JdDaFxpMIPZIu\nFdJGQRbGdjGKkV5NMf42thPEJNec84jpGnBCXlLCDc7znSHgXm7x0NaAenzt\npk1xEowI+Z8GAW2Lbs5QYBTDzzIzb4TvlsLZhd0FbktT25vJKFEuoT1oNsda\nJZ1crFXCb03grZ5yqy/zXFgOn1GzpQsBUzdgE4zaj49KicoVKC5fx64pLYwG\nHcAZXk0mISNupefxeyzl8up+5KQidVDCSpY3gCFe3kbuzw2IFkChNymqBEeT\nlY6nsU9l1If5fGPDLrkPiJSJjmymIAQWgMuF5PDqEn5aAMpBvFhnPvt3cjIe\nt3mrG4rUHRUN0I+VvFsdtcR/SPC5xVgp01KQ9hhtdWmosVMWY4z/OxWhFFbK\nB54WbQvH43GoBqlvdTnjArjMEGbaBZ3nSM80NcqqCCZ+9Hk8ayobcMx0sDoY\nol7N5nW9BeM++k/AXkwxB/XSaI3y8aDgCwZ7JOWQS+I14ta+i7hpZ+TGufpA\nRlMlO2bz8flyiEOIlDo911VVoyI3RVDR+dHMMfETGRPaxSVSblaupn5x7szn\n23BgSeVjDId3QMrP1YthC+64g3seSPU7hS8qm8vPnnnH7xHnAJyUS9BB+qcE\nLwhyaCW7BnXdr/S98g1guhMRCLY2uwF+7W/j+mCot2zY6egjFrTe2P5rCPWm\noVd9\r\n=T3zm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgNuDzcFoslzgHA4fUQbHLqLLT5/V3+JK/EymlRpzakAiBGSfQIE4EuIKpWb2xih1DD5DGVPt5TuAyl5F2iN+PGFw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.7beb236c.0_1596217244936_0.6269991259789727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.c44acc0c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-ripple":"0.18.0-canary.c44acc0c.0","@material/switch":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pKlQV9DkLcoE0uyrt44+3ZOZ3qIRIgs1wnHxjy9iIHpypuhAA7r4iImCwMMNHbi4e1smRUhmlBdEKH3Vqt3FSQ==","shasum":"56f3e4aafec521c779b2b110e35f8078d149ef1d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":52649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIj1CRA9TVsSAnZWagAAJLgQAJujWgqkbel/dp1QVa4M\neSsB8wuyCaVSPyl2AMERmvsUHXIv/yJ5Oa/PqSzCBrFHFqJEqq0Dk3ccNMTC\nsw1FIkySBAqJTbQIYvRPdmo+dqZrCFBx8Saj42pc85C++xacgT0QYyGqgc2R\nhl7SVEEyABjahReS3RL87IpcO1/+UFEQrBZyA0CyW+kkZJKOAuZ2xJml+wa2\npdTLq1dbrW23sJAWzVcU79Wjyt5k4xBsECb3aGqcA7dGb13kafEzlqA77miQ\n2cnxPda6H9Ii5TxdVGv6ZaNh2ipc/Z5IpZ3xbV6GedKKIIWHCMtPvuboj/ox\n/Vip6J/zEqaThNdbADM0ofrQxJePqJpRePmXnZ9sNqERhu90+pFAgRG5rwaA\nzRpVO3IajYxsPzqtFl0HrQV9fqtIi+NXW4Lzfzc5VFTswnci/ggwp9U9js7W\nTcCyDeGm2He9f9yqTQupIv4xspSknbQ+8BVpcxb/DnCKrFXFkwVzYVeqiOU2\n0YwTfn6KpJTnGISxP3uitbH1LesvA2kcxWnsjWHDE42/ezzdmAY+MyGAqX9P\nszPKL/Ta/kGu0A3JiOrf9Ff0rH55ZQJTzbxcZeXxF1ZiWitr+RR+0tMB2/vs\np/9ojkW78QCw2KxsIMpVBGMt8kxCI0TLrG2z8uUKFmqddBxdL8g54DvUBBLf\nCnwY\r\n=Rg5i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC78taFx15QUfSddbdDvMtnfyUW5DKF+0rKefSNPGpBZwIgFXAeL3uaihirE79HLR8A6oP1kmN/CCHR0vXIiUNYRbc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.c44acc0c.0_1596229877419_0.5189492020110607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.779853ff.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-ripple":"0.18.0-canary.779853ff.0","@material/switch":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2lSjBbfkmrdn7R8OV+7s5rrDqllt2LOCVY3U5Dpz/+3Y43VM9ltm1kZBA+E03hmbfD+dTwc0HevKDP0B/jH3CA==","shasum":"63011e5e00b1c6ffeba05708c5fd016b63308b8a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgaCRA9TVsSAnZWagAAkMQP/jJCba7UCmOnW/HhYaDB\nasO1B2gpsnc6oKV7ENX9rzubSarxr/jEEy8UWxjcaN6saeppspxInK77yPEE\n6i75TNgGPCVYbXOhT1DsRdstvH9fP+yAGVNHXw7aLh9C7JHIUb6eo+bdBJlV\nKwtMFpU8P6sm5Jg9lMbZPJWYFrZ9xW3FWqrS9HkNVdOYrvMr++R2hP1G0P0+\nIUspuu6PF0y2bABApZHJWeMbF87YgyCogytBcGLr2nitYFvwr9k9rwwgysEL\n07gJF1RzrD7WWBwWCSmKVzZTa8HZQlSA7yZD+poGTqH/Wm7loZntz8J+e7zx\nhh2oQJ4rCpNi0lsz7WHcsHjTmIrtCWyR15xmP52EVoKKxG35vS/Hdky/ciWg\n+n+qzi7XA+Zf7nyWGi2NkqFu2lb/lOS8flztMYAEq9ER1osfPfa3Ka1vxfH/\nRrNo2w62EMOg53cP/J9scY87wxXn4wLRPQL3AubHt59rtYQY5t+QuMZPFbvW\nnlG5Yi658j5ZXmPrfj4RnQsmJVSRrWD+ZrfDepEt8Q1nAAfkqm26sZrbsdrS\n42a8XUXAcoxUZy9Y3cspGh16kHb79hdjtsfcrkTMcEtFbZBbGXYoGqnv75hr\nCfEK/48UVbMWzTGhfUuYM7X4kZYEt8+PZJkXrBsTHQ4MGquiOHS2jRI4qva+\nHZr8\r\n=QWnD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjjtVb3kqtd9hlV3Xh7vTHmT2t5LJCbWMnsQgm7DGo3AiEAhAlkhqzrU5/2wX/N2NYGb5N3JF13acR1N3OMRGebeeg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.779853ff.0_1596475417723_0.5262296236604396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.8aaf270b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-ripple":"0.18.0-canary.8aaf270b.0","@material/switch":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hK88JtH858PT+FlELIjVOefXzveBgvf2tjeBI/fNndjBI31Pv53wegcRnRZWNXnyf4NF9tlDjlZ1eagCqzmh9g==","shasum":"a13e572491575441705fd0d085effc402c0a2df5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFo4CRA9TVsSAnZWagAAVAUP+wU5fdCG7JrWpgktTBi4\ny+GJLLWHeCPPgmDYvsjMboyvm/tjOpPS+lSw69I9UTzzG+BqWmzgUkc98Ua1\n40rOkUipNJvAmlNRdqZvLwbfc68YEQrFzn8NJ+Ccba7cUU+1oHnnvPr516A1\nSpQQrGNM/sBSFOC7jm2agT7DF5geGRc6UWPRGtsBspqIEJjTq2NKXrGtetnG\nUn5sZQIaHdkRlJdjapYPYYUFcLzt8iBL0BauW58qWbkRuTAUZefva5VY7Whr\nyq0CYIbynn9r7KY4uw6wQ9YmqXZhQS+lFMYd3egLPbHrV3l8dDAF2PgjJcsV\nGfnEnBdONixSxaIX4ErBnshNpSRdDYpaYl6ueSRXqLqiGrqpB3L6QxlU9g7R\ns+BeKtw+TsHY9DdR60NnxuKJxasyeGGQfPj3fK+mICa4crG57n9RxrOtv5hX\nai59gp6cTMwjpvBxPIjdouJ1lO3kCFed8KsN8T4PGOqyyE7aPR5WCYYxDX1+\nFYB4Ta5WQASrJg1B0gE/Lwcu/D+uBgZqLx7aIl+6HyxyW7JlxCUYWjJE6coJ\nIJEvkyV3SUZqpgmVGdnqFqZuDfzJnReSLfpQXw2RQsKLEpO/Wgklld2KgIRB\n6Cb4rePrBZFFXIlPgXThvHxnJPcUxHF/bKm7l28zZFmXOPsjT8exhPsYZEti\nKGiG\r\n=h5cn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICzCny+R37XTW5yYuP2ANkKiMB96acnF8Z+17ap+UheAAiAb9kcpN2wc5IoC+nIl7fg2kMRckqS/aJGWtdVChHOGAg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.8aaf270b.0_1596480055926_0.8753680897905218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.5cde9f12.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-ripple":"0.18.0-canary.5cde9f12.0","@material/switch":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.5903d39af.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sgC+2ib9jB7ZMl1ZfPeRXonYgbVCy/wNmwGjISQwF4v/Fd2q1Cbdk86DKr2V+KEJCnn5NnYcjrGj25OASF6Gag==","shasum":"60aa555299da40317a1919eefda4b6feae2abbed","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7+CRA9TVsSAnZWagAA8DwP/0yjonoNsK5BggNjtYEx\nz/mhocfj7lzIRdxLqHGfD9wmJpmGZOMewAEOzS6F0mjLyI9SmT0L5n4aPR1l\nQuSHxPNCYlnGplM2ZqjacWz3kPNVGeDiOdkKoXr2PQwpffP5DTJ7F79rGW4/\noPtD86vD8kg/f852IVo/U6dVFQM4uaGPbGeNZBhnZxYX3wyr1RqfExHX781P\nS2ZMRpSkQzRpZiaX0TSoREvlXj96Opf5nyNu3gLtsx0rAGeMD+1E/83FnIyp\n37GsMbf3kHbXO2Tp8sIXp/skM+scl3qe2t58hPIxoksWWBOsQTKTJoOeq6Sz\nJeeQkPg0jUBGCLkl7Mw0T98Nu+ntFe1juEHlzGvcmQVUs6Ck71Cn1T/pNY2Q\n0kcdLimMkzKs1r6rlVNkqr6bs3nzHb4bTcFleA8n4dOTVoD8DdsA59I3mlTr\npyZn+79rA1sdxSNBdwLqRGFFq9NZg7CknZBtMY/MQcsWRixMhtDA3PEGGEFA\nW+arkqtpq6wLOoHMkKgNNdKGK2X47azYKqr+Wzki6xPL3XOMRNPWmVC+QmRk\nZ5HTJoJ1vqp7KMNDaJoCDjC4/QbNAb4GTZ1mdibcmN8EUPjFe8Utthd3VedU\nPYAN9Kfklwpsjdbo5GiirrlaX/PaR7+UfVLuVnw2B4a8IKJBX2bU8DEev0DG\n3Xmf\r\n=Xf9Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDluwnXIAaIWj+zrWV/Ll5iIridHpX3SYN3uzcCiUV0MAIhANQw7gjgOf+9cQqb3ugkDky+X1iZqRki+YvJS9OMXRnU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.5cde9f12.0_1596481278014_0.565903358323326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.1607ec53.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-ripple":"0.18.0-canary.1607ec53.0","@material/switch":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1iMhWfqPLANyNiGLGiPvBUCs/xU4LI6eRF2osywvYlvr1V9qHl2mB3El2PL7ldoGFrhMFGCB9c6Yxllc17I00w==","shasum":"1761919d4fe1c1b849298da9b6d3d8dc7bca40ad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmxCRA9TVsSAnZWagAAwIoP/378COvraIDWnpOmqqwP\nSAyXw+R8QXMenBEpRpYXeQxaXrXM/aDDRsFqQ7/2if9meYcfNZFxTeEj/2zb\nSTrx7ghupmujae0oWYXEjAcAWBdaXpOMu5EFv2959A5oME25Lt+iRorJ09uW\nrlRvrDxOwkWXbYWIwd9U0F2jNzZMfbyycWEbJ6MBOZsvtojG8QVNheVR6eim\ngHcdwmvAEhwcpfH2ld5pbqPZRokyUS3VWk4iChe8MTGd+mIwv4TxNPvrPUkT\nCn1u7/o/fKHjZdmrUIgKz2PW7G6WuC17Wv6GKnvk0G5oK5562cJdJ9sV8cwj\nXO/GRD1Xqy+gz3roRuE2nfoQrdir2R/z1SzaJoj2HeXmPoHSaAPAFKP2Krr0\nuVumbN3sBxit3zHcjmnXE6ReYleh7vanbURsZEfnfLAQQ5/x+a7JY7L6W+39\nLOUGFo5WxpLZvzIACMo0nbT7VHSA61e2Q5LFGK3awsRsRuKaFo6j+cQsOp+c\nkC7IsojOu2ARnf+YIrIb7xkTbvzC29phP0I9Pp3Y5hGdBwtpXF+GUzpyntVe\noFQNAzMi258Rvs+pv5s96omG8eNsLP8nDoJb9osQO3U4or6aHLj4vaVobag8\nJb7XCBcZ0qRww7fVQvKSXJgw7XOdT9wL3H5PPyg9gAUmqv91ulOEGqAmbExS\njhyt\r\n=d6YW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgzc2e4Dmdtgtx9UGZyWonK/3fi33JfmVtEwK/dLaxmQIgWWaqCw9I20HH6vaEgDxGrUUFkTf0y+8ok7KCV3o5tRg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.1607ec53.0_1596484017540_0.3631001406682939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.678b30e3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-ripple":"0.18.0-canary.678b30e3.0","@material/switch":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lV4WFJYUlclZnyzVqag5auqfqt2LWAgKKkGbNoRKcJ3hBmFDVrUKYheIza1AmLJv6LYf9SgKP3Tcrlba8PfT7Q==","shasum":"c58f9c53dd9d93fb5b1121ab598a4b49f0c0b406","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqYCRA9TVsSAnZWagAAk3YP/iZ6pA5OFnaOiZcAlxZ6\ndJiYPGjzR6p83Z3Ot5XEDUHiM0i3X1isFsmUGMLqH5zsKAd+3tRlmax8BmtR\nUG0o7Ayrrv4UyM+S4RVsA9ap8j6RtH87eD5dmpLWcPeM4AOlJoEqW/0W6sVy\nRPj0eikT5cbUEynF39uveU2/XSichsRi589MJNllTugRZy0U2nCnTnHEWB7U\nHn/gos6s2Efz89W4XBLDNkjEwi2YCA1EopJ2MX5+kNsl5YFX+8tiLDNX5nin\noWT8YHEuKe1KphMxsykz591NCTdScCo2G9uvg/tnYtzUGMlWTgJMLiREVPXo\nWUDCLSimSyrzpftYCHy2t+hEx2ceHLLvuHXSzhw5l4LKCQrupiQKWyjzOSMM\nAkik9ukgfpcCeMM5WRqZ55w/iJEg/BC+vPbLnhLy/IrmckFJw1A39CSU8mJk\nrzl/I3lk0dXxzBVtO06KXGkfKqJTtDDl6fTON4KYdwXfMGI7iO6vvExsyoXt\nRB0zRVXrDe65BgK+7+bzOCy5NobSZSy9qjGELO8uk+BtEoLJqHcpQPZstKS+\nra8hgqgIDOJKcU7Gd2T1W3SmzW4mRKXE9PQ69k0RcDBo5hmAnUXzj8cgvNc1\nfsj/mwfibBU/eW0yGU9rorQaiL6rrSz8BRZ6bkHgGl6mgZMpu0fvbTO0BRQ0\nHzG8\r\n=7jm7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8ygL0EzmZR+07tQhCDJaQHWQ8HN5SMvfrnuOFG4z4egIhAJwsPrFEg337H22v6gpv8ILRIytg/fEDqGzlBKBxIUkP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.678b30e3.0_1596484248134_0.7747648080950924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-switch","version":"0.18.0-canary.21c55569.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-ripple":"0.18.0-canary.21c55569.0","@material/switch":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OwTuD2yIUbf+Ht8Wnft6ZOPo8KH0qnHEpuXkbFw4HWlmYHg+T5L/Mhfolv9i8eZwIWioawGiHpqxVu8Ci+Pvgw==","shasum":"7e01c715b9c5d199fc906c00c1fce0bfc19536fb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwECRA9TVsSAnZWagAACB4P/0h0pbSnBS38Vo5w1Rrt\n7iYaYdAdXmBByQdBVZRn/ePSawBeTMQJEyKfJxosd6lxS95A080wrDonZ2kU\nOqJzPslhFlOcpaqMCxpxdNzQ0SBxa3cyxB+pQxGc5niHNvD9ZdrkLwFnEWiw\nS485WAg0yP6j/iidjknpB2C6hb7u5RlFCFiVpDKtj60xYmbEohQyhRlPy43X\nYvuDSAedtMoPo9f55SYr3nWtAIKSeqhmqS4LyXnyjE/8BeOVAxSYdaFLef+t\nNf14oXxBWjoJQUghbTuCXEvvgvFyO+8K/fwzrAimcHhHfijAhVuH6WbSnm3w\nPEfI58J/FWGjAaEE/HycjooI07shKtNJI7JDpLNSVUcFiwr33X8TBdldIHgI\n9GpVSCLqNj3ofrhfQqCK1pGU17xmotlzsBJP0kW8nLf5Kms9hjjiNTlk9sm6\nvbEn1lt5m25HnIwHv5eY3M4/WqiU3HLTeR7FVtj45UHDWINk2vTKoGUSgtIS\n7HpOlmoLK1LYA/58vPSwJSQPbM242ad11vnxOtTrL1b4S0iejZ6235GyTbWq\nVRK/PC9TYVtwSseQyG2w0cKKzrM21lIWT0C2m7oBxdCp2YXS8h6rKK1RZixx\nbpfiY+rfThfMH310gxbWzEPoYbMAae+nyr+gAAI0Salng+tSGTnJgNOiJ1Vg\nEYYr\r\n=ggle\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCg/QhpOr9xzRCa3ceTgDEPIl65e2Bw7wFMp5YGZdoidQIhAM6qPuvGJ1HmCMcQAeQhsHm3xlQQ2LCkCflvGU0MS0xC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0-canary.21c55569.0_1596484611647_0.20654407011459375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.907d4d7d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-ripple":"0.19.0-canary.907d4d7d.0","@material/switch":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ny4RUC3rHYJx4TqJozbH7VOGtvwiNQaY/aJZ4RgwQwaO7xK33pqSqGWYMDUzBPn5ysTV6F+zmVe772xEAfkonA==","shasum":"4c146dd6bb0491bf6d9902e52f8553d7e9e8aea4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAcCRA9TVsSAnZWagAAD6oQAJVT9X5fEySpeIVg1CrU\nkNF3xBKhmcGPlZZzwkJkB/u+UCFKC1F+GEupgB/KYgVTFFTiXWGTOGCnqWFG\nlxVnsLGWzNxBYci50G7WTYitBRRyeIkpLzpZ6yEmM3S11mfbFtca+KnxC8Jq\nBiNqa4f+JBb7uRaMfY0KiUS8GATUiHTEfQLmi6LkXDm33b41rc+dtcymAVaT\nJ3P8t7iwY7WM1b5pKJMw03ec3pd6vuULFUYAQRFp9VCTnshfxW8PNrNVyEVD\nLSi4UREOJxhCHjRO6MQqJqnR6d89SntzA9cBXYIWRC+MrwGdPK1/YCi2Nskp\nxL/JqQfdx87oEWPV6ML6HygBusb1hrY/SyxGf2iDePcqZyax1FU2AUiL4uST\nar4FX6hwb2Znl8LctLxfduuF7PfPToPHbKCnKGXPYEcAKgSrA6De6K72WFHh\nl+iKw1YezLa+bqXWsiQvJfmDFKGKaGx2WA1rRm7KR6qNmrqo9e+/Z1zzXfzH\nvqM7TwvnUyQ6sfH34CzfqUI3hTnhbzykQkAQNF32AbXrlBVNUW1YS1zRDiS2\nP/Jbws+G/NtpF9tn7HJB9WXc33JdCA0acg8A7I2XUq3SePkHq7u8oNoTU+Ll\n/maBEzpHwWXDqArVwTC6o1TpglGU95V10wSqJrO6nKONp/fVs9Y0DQG4s3cq\nCiAC\r\n=WX34\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBlVa5RVEL+/tU51J/QF+zm8wTpnAra5hKqWS762vFXwIhAPwS5t58DJCgK+vQ1MW0IDXxp8WfhZZB8rn8S84NJMNC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.907d4d7d.0_1596489756287_0.9298830091521326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-switch","version":"0.18.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.18.0","@material/mwc-ripple":"^0.18.0","@material/switch":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-AI1aJFBUNUSl94XwYNA072toyK3kpFJkii1QxPMsDMsk54KR/1uT57n+Gq6sfMAzOSchV/MYCraZs5v4Bim0QQ==","shasum":"481a3fcca68c2fe17ac7a88608383507dba1d6fa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.18.0.tgz","fileCount":16,"unpackedSize":52623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICOCRA9TVsSAnZWagAAUdAP/jj9OVziILNxRX7c6BH5\nnNVAAY4TMXd0oOFeh8KeLJ6CZAfhksE5xK0RyQvpbyfvdbXA8OzuvBwNwKbw\nT0aQPoXpQdF+uEeuyUujrtt6eKzE3xmRdUVSEML5gvSpIYZQkmTt3miSrcnS\nqhF72Hdk2yyITCvO1GDSH5aBJ8nCo674u3TH1bIcxUcdNN33LcH6NPKXFcOK\nvF0/WdFBzuAEw+Kc16BzqE+6rLWl/EwDziU0YO8vTXX+0lhGmjuveyvyU5lV\niRl54HzLUS3Dy2/o/zHEc5hYlMq2DaimsrVbkCZBdx4C3fHMjtQ5fG9BsU/S\nPHWyisCIGzi7+tq1KMh0hkcwcWnjWkZ2byiW17W2+xYlL7yYyuFMkavteW+t\nqM0dA+EKZjKKdDZoO99NqFVT37i/bQOceX2FGLYHKXXJFeEUO1ZyAbAs/Wdw\nuVNw6XKIR46fsinjC1H6F6L1eKKwNda27QBrQAyPhFPmCBcJuy27FLa0PXyt\ngxDP8udA/xLr8oHCqGa1dlnSKc85Ra0P0RsH5qirOttgmyi9JIPtenvtWJKj\nZYnbVoddrIahOnXSL8/P8uSJJA14AkL+LDH5E6JIVlowrCM4xYvxVMFFk643\n4mAiMw8hcBudxzdVv/NYCXGayTKb6f47kv0lo0mEAo/GM418VUsac0gjVfJN\nNjPR\r\n=tA5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPhJlJ4BSeFhw2TZsTGRVC5zd4epEAKQiNR7q6I51x/AiAfYrdbhhusYs2BK3uYvtzvNmiOjUSqIGSw5IT54taRMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.18.0_1596489870192_0.17411629949966856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.f7958e4a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-ripple":"0.19.0-canary.f7958e4a.0","@material/switch":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ETdJ6a0EFCKID9wY7hjwCBaEqujS7pMMibLj46YqXDZo635X0Hiiw2rC88sfkV0OxzkxLaoPLi765hZK2bCJqA==","shasum":"097990cf067548e9cd5bc7acae4681b3ca2e4925","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLJCRA9TVsSAnZWagAA1aEQAI0GtlCfAHob/LVb5eRT\niayOIFD29VEqzptZTVdqrTmr5u21z2lXrHtffa+znaThtaWmt6TML4mr1jtn\n/iLmySaxqO8xmDE6PnnJoumqqw16E01BmNs8pavrKHwivsZK73Kkniedt8qn\n2iEfdrC8TyrilqyFvq0qVYn/bDYkaww80istlz7MKBC1bhu7MPsCwVgD08G1\noEnfJzKyaUhRC6BkjSiMDT6woNXq+56pVFysh9OFHBFi712taxTYpTQcXg4z\nwVmvc2XRkEVlDXnMHp1xmg3gfEDhh5Yaii0Tj5oqak7tvdXRyKtVtVRKDfjW\nJjNSL9/x38rVjJPNs2NP++oO7t3jqDPYTyr4vgTOrlrdfFyPg+MMsG7Wj7rI\nKtki7+zRHJpve3SJOZAfzMWBKK68M3LcbNmTW3lOQ+htgTTMovoEYqert5px\nwNOG6a8taFdGMm3c1iaj7qB69NBX1gbO7RPAUOJZQDaVY08ukJ/vZj+odAro\nTrvXp6F2QyKP3OKeUAIi11WOIhGF1w3wDRbJ0IOLR0RcgCqG4uL1uqk6KiOp\nupQclPsclu9wO19mw4uP6XYTkj4wjBs74SX38gkuBwg/CBD9Cb4jNESomq91\nwLJoPdMGOo3oQcnbAsA2PCens8E5TUY2V0tYhB25dJYlXtigVhlIz/9MEc3F\nY7S2\r\n=bBDV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmc1j1ioQiLOnP3DCfpsk9Iy0Vf69x3BDTY1aSmOr/pAiBx6Rnf14zgIEiq2815OXoTQy8gKTB5ZHRXIIu4xekkvw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.f7958e4a.0_1596506825125_0.7045200586975637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-ripple":"0.19.0-canary.f8ceaf79.0","@material/switch":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-D7uXunyG8WNHzQHjUvlp2USr17h5AgcEhZ+W3bwSFTjnQbohJXRCjiBTxbziEOgqnwGr4hEnXOf5oyZJZqTHNQ==","shasum":"cc0e2608825c9f326d8b5bc55ae1aae9b1b0a976","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbR8CRA9TVsSAnZWagAAsPQQAIqaJryhMb1jt6HLWu9K\nPBY+crCgA3eRZGQVYbjTCm7NEy1bHUNM8sm8Qzabi5hQIBTYWq5h4QYd1093\nQ8oDH2piRN75HFGmk9i5q81jQYANOili56AVRkhT7xV0BpaABoM36qlwVGZ0\nH9AgK0yJd6cmB8oVGtVWv2d3f0xrY06BGqfQA0eEjRuCxk+zEbSIsByYj5T9\n7XA876GHZYFN7tSzDbYl2TfCEZEtqcijc3s8XoMf+DUOL59P9kwSTPD3F8T4\nPTp+89aG8xiojE5m038qsdu37VVKrYgP9ghYf+Kz5MH8JDZvXmgoNQOl88Jn\nRZMObfi/Ime4KGHLD+4WuVffrmZnVLCIqdL4/Y4Gw/tno1TeeQVruvtY3d2R\nJyzNUomACGoHEud4iViLPvDGT5keQtMXHv5xDy8fu/ICZ1nk2vApFpmr9yCI\n23aUMRk0r0O8O9T/UW8DmC8KKVHjSDxsA1B1Hw2F/zvc6s88iU6r/0c6krWX\nsgn8XlDrweE+d1Pyf0p864qaFrZYpiZhjzYQYgm64de6e+wKaHjAKrAYlGln\nHmdqIuG8Qt3tFKVbO4UmvWg6VxwZxsmFu5RTa8Aw4ZCP6uFiYPtFY5VR4tDZ\n3+dNfi1Zk63W+jlI4oV1c8YV6YayHQmMJy1rMhQeFSA7DBi4B013bj31fFbM\ngHe9\r\n=219C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7v/Go4fq0UDwZey1enfG1SaiH1RY6K8lwNlyp1JrGyAiBTRj04qCr2Wv3LguuJNkXMvJWewm0n73/pgGtLiMR+ZA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.f8ceaf79.0_1596568700466_0.26467576117573977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.6b9e385a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-ripple":"0.19.0-canary.6b9e385a.0","@material/switch":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Zw8JKl9oXpE8GBp3e4bfxCnJcGFTAqQtOnTDR/ygb0yyT3qhIwBcjy1X0Gkq+Hl9Kl58YdFYLe6+9V8PhT7lQA==","shasum":"97a6a9e486721675a101f8bb4711a414ea302d99","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNaCRA9TVsSAnZWagAA/XwP/jImNYO65ClyU05MJJij\nUdxdrxNcqEbxTOtU65e4gNFrB3sxrUKtWAb1b0rdGjYvBh4UprIup5HArB0r\niNgdr5/A1WVI+8QQUQpoaWK+sdmL4H/eyhsq5tyb5BMk6v/nTPEY68GHPIYq\nTDC9HOPEeSCijVCjZ2qgTMbYU6npiMKznY5cZxiM7101kesd/8o8Q0d2oM+v\naDbUUBGXEdaHGQrwFy6U+D9s/m1Kztx6BdUE8U6Zlg723G+ExZuMwj1khCy9\n2rB/TUJIHKSspErnBlweSHHtjYkm5TknHLtu3mKpFbDAAS9tBoeVPslX0zLl\nhGQeMvy+iekhj5drrnJAzKiv44Hv+XeJbh/ClvyAR8xrqQ+4Za7xkVIRK2B5\n465OFox69Rw9TExx5RqTljPcup1AYbvQMmyEQX6PdtyjutDs3yz0tSWQV5cu\nr+lMpUgcozwz8i8DTl79AHoPQQr/i/jlUy8CL61X2Wt0wffG2lYoxy2roHU9\nfFTaCeQTsZHzE9vX4in5YJcDYmYuon6OYUMmSfRtKc+V4TEdFP/mnw3oKwYD\nFuxRqGajR5iFR44XAB87igP1DX17m86D69Wb/z8gb49Mg+twdi4RFU7Yj+Iy\nDlNqpusMgBi0AcUnYt/ve+ONnzodXlfBchoc9l1KxF7akayNJCdDKQ8V5dJ1\nzZyN\r\n=V7XG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGF+72RJqT0UwJNqBYqa4tDxh92HwUgx1FmuepYSrXOgIgG9Lpzz4mU+14n8+z52VN0UN9vgg1euZwOPcOZSwikcw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.6b9e385a.0_1596576601650_0.509441868415361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-ripple":"0.19.0-canary.9a7e6d2a.0","@material/switch":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FJPIDBuZjIy9gxvFGXYdnx321T55xil/fWJyuRfkRD7sMyTh7hhmR58R0S96dgG+XMJ19w0qu41P5ffUzGjb5w==","shasum":"de71a40353ac111efa375b55154c7f896ed3044b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuCCRA9TVsSAnZWagAAHCIP/1e9EzSxciJWyA+hfxt1\n95l37WwrGuMv5wjHrepJ8CvQakVk11YERgxJK8x590F/R+/rmlNXm3w9qm0K\nFhxK+u7iaep/biFCUb1LxRti6VNRYw+feBhyLtEiZMKfdl206T2DCYOJNYqa\nYvu8rs8KWtg8qQbfndBR0AQxRrxhRriifN1dhEElHIVZOIi/0s8zIpyzc86O\njFVcntEhjktV7Ivx4q9vx6aHMCpLNvKGs1e1S0ZNv08rPOIQPrWcwzXgEnF3\nTdtfuC/N8ncln49utDwvJrYDBW4ngrfMOYp7VVTthooqvvoM622fRnYd2TTe\ngFpHhhLpB4pcPNcAZwjpg3bqFlGrfNouO2fgeJiZ+3i0qAhf6O++0l+rjQ5G\n2RfREXjj79FBWdBA6b0OStMJQNLYuzm50DQsHQt4ft3paA5eOIPmqV0j1eD5\n36kKTbFL+yeRzXKz1MKCcVVqwZPXhDYvtbVCDL6Oebl+AM7WplHa4b+aHaIf\nLypXdr/6tJXbV6EPxr/G+1qP7MUbpSPGYyDsTu5BEpQt+jFQ7bHRVJJAtwQB\nWQeG2TdzAkRv9yFtPLq3ZdIfUyPcOxa2kbnoVj5GnQ1Nogq7ku0u2raB0Iad\nuw/MfW+yeTdoKG39MrGft+yeSDGbYT3LvO2dNxv1UlieslZP9JKozkh6G4tB\n00Gq\r\n=yQJV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5X7T8Er7mbw84oQKvFPwjmurz6nOOjRiVGF2nOcA4VAiAJ2784kc5jelf/+X+l0X1jWWWxvwIDcvy+Utlj5UW1kA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9a7e6d2a.0_1596599170323_0.564160126756732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.188f3f1c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-ripple":"0.19.0-canary.188f3f1c.0","@material/switch":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FFws0EDNM2usAgP4Ocs59CzY97G85oX9cYPMQqLQVpgAJNJy1P63XKgvGpypLy2uAqKpveBiy08QL6gOOjL2iA==","shasum":"f3e85730737ff3fe4e091ce70a363122c51e40d8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbTCRA9TVsSAnZWagAApNwQAJrA+iia0FF7zRy4O0Pt\nwbbqXzZooX0TJ5B0X4Amx8a2mdmhxSkSc9QMhe8V8c8XoU5HAFEXVZvxD1m5\nvAvw133uSa08KdP+wKkuvn+Aj5rKLGtxaxihSVxhXlwdQ0eOvhuehtJXbjq3\nu7Fu475BDxv3Oz7NEbYqJw+AxY06KDPBnk6xTOdXXqH1zWNIqHyCGD7cyBEX\n+QBI9U0jzKa5puSGwpfjPdZ51KsqE58X9fuPLJWvtBtFML21pgm4zes1qVLp\nZuj8WlZzafX2sEPXvBkYWYTFtVa6PaAwbEDLy1AmpFbGPNc2MkpXhNYQed17\nqAhCYTVS2OlSlKy4laMrP+a2ZFXdjzoRjIxA4zESwO3Y20ReECXHSfxJgkp0\n7hasPqxXur0iJ91Q0NM7XoKTwKTnaasV+vF/A9YPy/8jAzvQk7m2lqi/cTqQ\nFdyiqQitVezm485bDDlXL6BFYWsoiFSIYFuhGUDQbyXrdCVz9ULb0MRvF+aZ\nRatLyH+cb53gcXXg9HmsuLk2tl6G2wofnINR8BNtAMMUGKTdFiIwfrm4FaDn\nSnKdVAJrSdwR1sNCmSGEuDW5ZBayIcJEx9kCLEvNAY32rb9ARM2KJWuab3cn\n5272T57o7HXHYrZUDj7H3ukk9hnXuqyyv2AuFia7IFW7utBkTkcIEBXkUMeV\nk41n\r\n=xsa0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEEW6Y4ltcig1xtUKqUV7m25hWQmjXUpRIj6qWKkqubwIgLStzXAs6x/1aKe5QPbw5rI569O8OdpmHC9Is+9s7ucc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.188f3f1c.0_1596651218640_0.4149313364462126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.b6106add.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-ripple":"0.19.0-canary.b6106add.0","@material/switch":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uPkUFgkIatE54oXToEWLqbchoAHgiJne2TFP3ZzzMnyKSgiA8QlNLWPm9uBAmVDjmR2IM3rYpJ8PC8MG/R6YQA==","shasum":"21912b36cca760f6bdebb25a7e7870042c5c845c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtgCRA9TVsSAnZWagAAixMP/2Vs2EEp9x+pigfEATQz\nr4xFN7D+Gh8aEO2WyODrPi/CxU9odngPQS6CyLA3jY/rQw3LJxSvrrEzaJkM\ntuaNOI5fYM0RJZyBYQUfzjcuFfKmMx/Oy6O2kQ6A9RE511Al00MI425ryB2M\nbSiiei1710Qb3jIdM0Y2W2KZEpbpNlOxi2xQDU0YrALZ2c1iBdHqbQuY2SBm\nqd4iLCgxZ3RuTcCmvBGAji9mUwAJK+Qwi6ItxwYMfNdlbtkHbyxFyizwaV/T\n7xx5WnbEcc/kpBTcCsUH2DV3Q9uGIIojgCSJ8PeyrhrXZttZPdBBHu/iWCXW\nNY/p8PJa8oheUlzpLgGBjOB46JXPx5E+VJpwPAE8Q7GqQHIhF5m4fDCwpvBC\nvw2s4VcABQNQJAaLPnG+oU4qxSoTI6+9sE99y4DlO3YMEJXwmxei1+FN2W0h\njqT0enD0R+5ISQall6Fpf+1r4bItLK741aMB7tDbZznpfNMS1+ZtL6fwVmnX\nZNBl3S0toUgRGP1trGsDFaw9+YwBOxmoUBK8Z6wtSRVYxUN6qdesFtvDwAwj\n0t6OcBZacxXk17FEhqjon3dGkSKrvJHw/kbVLoVj2SnQkqZQIg6P9efVLfL3\n23phe3kXUSePcPwrTccry28SXimo2sT4TfNkInqc/I2WhCg7WmNG7gLTI0dZ\nlZcZ\r\n=S41x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvn+Tieswk7+QxLvDggr3WJAVgUUnV0plO4QveChx8wQIgfy9GSR8tuINg9jxSTXqGMKqVewl6OG8hfana5F0qLCM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.b6106add.0_1596660576149_0.17620271728666448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.ebb4c667.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-ripple":"0.19.0-canary.ebb4c667.0","@material/switch":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gaS2ozF39xtl4XQ5y0w5WIcJpwXN5SQm3djIxgablQd4BvvLqfAfNVncZx5CEFY4OZXO+++bRXPmUd49KdysNA==","shasum":"5c13dd8a9c77b2559024541dbdfc0f30e51ff25c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0x1CRA9TVsSAnZWagAAruIP/1dUD2s4gT+nS9HDGTbx\nCSWrovTM7ZzWFqjRQpiRF4EVS6Tg1To0cE3U5K5orbEJHvlEFMC/fSbUvH/1\n76ZWG7RfCtDH1ycocqWu8S+bZHhMQHxTS4gVJp4cGAyQTnRJ/vxy3vD5Kunv\n9Yz1DdnhdEU83wfvcrV+08h39xlM+ow4H180+b9q5Me7UF+9E/X5UFC8/Ezh\nojWpLjH4kUgbXWg7by6beP/e+iuSQlyu03LAkIS+zKQnP2Jr19pLVUv1Lczz\n5bUG31piuyqL+ij/385Nkobd9a6fgArNWPkCSh0+6PqNW6+4XhItnq/03E/M\nrxrxxGq5/K+PqEobxf1iZC4DBtEv/BclMzvpjzV3JBngD/J3muoHdMfxQmbH\nTWq0pWFpI51TcC39UzjZhepUaZBwCW8kedd1My7VJ/Y1D/3n/wD/UQk+60QT\nXRH9GO6BhRCTjXkT7WqAukeZfsiIIoV8t7kC9EAQuvQ1dPHJzcVSOEMtUmmq\nCByI3qlLs4UNaQvi/Gh+YDOGyaobI2t6usLLwFLh3Jg0YZfAV7KOs8FHPUy9\nB20OL9PgTMXqTXqC6x/yKi2pMzMeqX6pDRFVajce0CHujavxc6S5zERRJ3+8\nW9apaxROWJFfrr9vXaGZBrohSbF1XslOrGq5juIM2Sez9pMIK0r5/H2vKJiq\ndmUG\r\n=fXqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpwbJntfSD7JdxP/qmvq0ZYt/K9jis3DO03fSqhHR2ZgIhAIyr9+8xdlqMA7qXooZgk1mcNumwSHYirHg4byWklza2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.ebb4c667.0_1596673140545_0.8537820540666217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.aa44289e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-ripple":"0.19.0-canary.aa44289e.0","@material/switch":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X5ZMpR5oYyddljnqqscdHvIoU4sKlY6RUrxWY2gOz7+J1oux4hw0kO2movCZQZhdZTGY5ROklLLP/+OhHNxAOw==","shasum":"f33ef3875d00c48e70e5f2727da45abed11e46f6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEubCRA9TVsSAnZWagAAy20P/jZ3qkDQ/AoPbTnoL/U8\n6JtGNJuN0BbxuFr3tCtMa5aYf/oCr1+NRT5x0+mKUVnFdjzRjtsCTp4+KYgP\nWvU14DHgGEAymW+1GrxGBpeS/Eh6E1Qso4mcXm8puM3EbIk+ztKzDoo89rZg\nD7TreJ7smSeP805ukmYuK3Ycy6wH68hbIkP6j0B5qPl9ij1+oqdbTH4dUWv2\nels8DUFopDbpNqo5CL1h/pND1HbY6sAprGGB1osQg4mGBCUlCSP8Ph3i0bNH\np3CKqwqyXhMDPys8Ylu6endjzLcPKGZme7JQ/gUnbiVOZbHEI9/gmOcQHnRF\njxNtAR9xXiISsIxPXzdDfEBKyeBWJQfIbYoSgc2osqbIeJ3a64WdzKb7RBGw\nPf2hCM0MTE9lUSguSQYSU0nrCw9TPviON7VnO47jdEUeXcwqplqjptzxZjuV\nXAcmztSZHAIbx78ETgwlrY+w7utIFWhtTJ1ve8oPX1iv/6CNQx9bNXVX408K\noqQ1EMcjTmJRyv2PzEmng3ra6nlp8RfgkTgIsX8Q52xG2N03MWIqkxhM06cd\nBIAlv+4fdtDcnigHIUbbBjL6aMnZW9bnxQsIoNR3F/mhHek89K/RxBJg2e5R\nFov0ymcccbY7M6bxpjfWt575k1FUxTyYcjpb76jaLL68SMixkzyHROIY4uhd\nJ8ot\r\n=6Nyz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/3i6VbaNrmRzJSwAmQ7WSD9SRExTWYrsk31PWB024iAiBxYT+F5U/Wy75gty9RxSiNKWb0gU+H9yZkHDDtFWSWaQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.aa44289e.0_1596738459279_0.7019960696384908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.e6b0816b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-ripple":"0.19.0-canary.e6b0816b.0","@material/switch":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IpVM0u9sADbnB/qRDIUJkrl0EkGPpOhY1Q2uW6RaBerMnNb6Tp6qz4D1s0/9N1nngdphUvdkW5eXWXPKsE0pdg==","shasum":"c68f434dcac03a9cf69ec1838621bf27754b2bb7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDuCRA9TVsSAnZWagAAoXgP/RLT4K1GIR0DqrUxsDJD\nl17aBSIek/4OLY8mNnG2fLAuwSifvo5MtE9DWysW2sYhsGwv9iQhUvirvGS2\nTXfyNmJ0ot99X04oxDBOZwAMw+HfGwidE1h2zIesk47Gi/gnJTzlbRrJXbmz\nxq7scwQDfHkxwzOkFG+0fsl9MaDYUpF8XdesANppCEJ1h5ko16PSLaFzFEOp\nmWOAi5ocslmxZdmANZMunGmiHi5WXiJk87NdgcAUEGsZKgA9vF25cE9WjORP\nYu7eV6X1Oww8YhHHYV2XSVGwWlHcIQNUcM34u3g2eGPqTPxQNqX+ci5jXeCW\nXp86e/7nkFsXOfw5DxMZShIMzFO2dPmsKYNlahvC9Cg5OE93Lajnsf7AT44z\neC20fM1UG8R0t6ZltbZ9R3fJu7SCnNcfUscv1UBq9b8r7ZH9ek8IEkmF7fw/\nFx3La8kFkNmgIWYMtp6MaLWHLxu259x5lr4Tbs2nv2KtVG+w9H+UGyhlj7+N\nVW3y8GMPeS+WZ9hFCX3Y6OFK3+QuBCykwmrh81w6lr594KGhyip2CNxoSB4D\n8UzPqw1zoAkoeJeFvcGwZ2+aUXfB24JdYcbOUtDXgVadQBff3YRfi2bZZl3N\nXip3MEdg3YYbtK4n/8ziAZmKPjiyiv8GQba2KuBTwyzzgFIayAYsMmHj0uVc\nAr2/\r\n=ra+4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFyxMnMHqNGcMO7YCLpUmIcylNPcCGDc6hp2QEWrGqTAiEAn2s5GWpYkrzIfu3Qt0PZffkvQe/1xAe2BfEQgOGn+KM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.e6b0816b.0_1596825838200_0.006636588365672935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.96d15938.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-ripple":"0.19.0-canary.96d15938.0","@material/switch":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6cxCIjqI5NlXUSWFCPGOfyf89AswLxpCOi3/7YwaPxKEsuz+XWUx1DZC65WP0eXDbnLJ/9WJ8Gq8BZ5TgFOcyQ==","shasum":"29f0328c08c4605cabc1a5a8caecefb3b0cb49eb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmVCRA9TVsSAnZWagAARb0P/j9mZsCfJ+rApuZ4KYKC\nNd/n2lQZye/QkNmm1FSlXxRPVHK2lkLJJPU3BjpMeCrTL2QtBlCqak0hbgu0\n1AfZPqBWCQToQYatOUJzwQCisYmm5K8h583F7kc+mSxzqepRoaXgWNp76L3J\ngYpDpukpFfzFyQ5VNmTtn8guOpHNG3mUmkQ5sVP1a669sXyK2UX2+4H5QBFW\nvUgLm23WT+P7CeoNYj2ccNFd0UK53r0kDfeR7OaY9qXMpZm/gfg+qnFwKAFl\nZFR92IOJncEgDZzHOemB0LmH+Fi3D82Z0bOlj55QiXmOor2T6tH3ydqr1d98\ngn00Z0vkDG3aVB5zlSIVTT6+oY14BdBbHVB57cuBv7wXLXOjgvIMCSgewWHp\nhzVEKsMz3s+6ToldmdmZvWjpo6D8QPEZCxdS/q9od/gCX8DwYBrBwSOLYCjA\nwlmoIh6f5JlQnWgrxO0UjL3xUKYCe+PHUqw+vxooXoQo6R72EsFP4Fu7tBRP\n9NqNy/zcC+ArV4LGlw0mJV8vY7Z7vWzHoEIQIDeDbafu0fh5SBT59pfTGDAy\n+5GIq9S2ATmEfMOkgyMrB427rtU4SdMQeoHNmcSgBMg8xu8uk4AiKJUBTlWJ\nZ3aCBtVKjm7QCgaxCNXGntGZF5CWYNlmB6BBGYmctAI2GlaAeRyH/SzEVivb\nU2ZR\r\n=Fftl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP2lEHSeIQUbsVZLQptRGKayAJ/8r+BVPkdeF/NLeKegIgUNJP7lEOruI8tSSkodLRYHUrCb2kR3Jv1ulpPYvavx4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.96d15938.0_1596832149411_0.610103070609515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9d991c8c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-ripple":"0.19.0-canary.9d991c8c.0","@material/switch":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ejFBPEhwTPp/FSky4s6QTaafgBEUnbdd8cZelX3R0PMqBP4tm4S1pbStb6kRn5zM2Mb1Md15z2YjrQwNAG31IA==","shasum":"ae1cb02670847ad95831b9f3073ce49673f87c98","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDpCRA9TVsSAnZWagAAuZQQAJjQ9QTFzP541TMZBWck\nLwqE6gjXHLjVWuWJh9AjgzxllH2qU2b82YBz7V5US3UbMSe0dEz5vElQTa18\nYdrO1qbfk9fcTJ8klqH2hGzjQnhPR22PcKRy9sv7pt0ednFfrgb2KwIJkYCY\nJVQk3NK3l4OB4raDem2OCTedbcaNowvw5QppFJpgNXkbigp/YAy9qT7RV0fv\nnliRv2glo0U2GAM2NcCFWyEH6VE7YL/qnkeHYtcLDSC4CtlLDrZ0cGcJjNdp\nsI3VvzS+gZwozr9nezXPG50lKgWBSwgu9Vfh4qNuObqsWClLe//scCj5wrQF\nmNktYHvt7tkEVAomPeptMIpAwKxY4uHaqkNy1uNrtsdmRRAr6H5IQC5w9ai4\nWlM1J2IY+o1BoOS+grT2U/dW7oyY3nG8924TInZny4fj1L38GZjlZekX7jPD\nDuK0nRVaEPpAVpG1lBhz0C67DKtJMvH8a+dHmLsiqc6Srb3qJAKFqe/Sih7O\npwkOxZdl85jeOA1xM1Dke2I5giVIco0HJ/FFOYJGulvzdQ7pQBxfKaUGK0s8\n1baIghYLsKw/3lpUs9S5KkTF59KrVCKMiA9gHE12QRjafGafBIlcCbgKzUqC\nEPh6YFBaDy1Jv47BdqBa3ss6TvvLBSUVTM6mnSqFluDYNhw/UoTL9kpcWZ1+\nmmnm\r\n=2+i7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0HabGQj2qal+/vYMf20lT5R8108NjxT0KIfc1A0lP+wIhAPe4E1b4OY2d59COKsdsKvNU7+b1e564wZ2iD7ulwtrH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9d991c8c.0_1596838121144_0.283411284085493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.13bfbd72.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-ripple":"0.19.0-canary.13bfbd72.0","@material/switch":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rpwcIJoG9UWRL/aZW3z/KAIEdXmswC3Z5PRuNMx/r83Q373gtvH3d/tx00g8i2xpbkflEOqQfFn9J3T0addYlQ==","shasum":"3b0f07387f4bc4a86e811836a7198e769d7886a7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+pCRA9TVsSAnZWagAAI8UP/i3gSPBQuDYHPafywjb4\nkNEiWxvEzh9G1f/yOMj8q9BpzeNB+XbxK0do0o7eu1HlOCcEkmbSJfIgm+Eo\nG8x45mHPLKue4Fs0Q8YLRilbrf9x9/XbGuYZe78Jb7mmtah2T/Ta3iGpbJ9T\nTR6SH1qt9hNNH6qSsP8kERnJyvpJwBFSFWBnybjlIq108uwYS1NPY03u6Dpx\nFAxMuMQAaXOFLG3U8fgJ7qTCVzXHxpK6iSQ4TG0SPEgA5PUYjnzJtXra6UZ9\nZcJNAo4Sni3GIM6nqGT5qWn+3cB2ZmJEmPo/0u8wlMgK4nR6STkEaSfCagLj\n6GV+eydfCb+5OBPTaW9Wf+fDkVzoe+5F1r+gNYQ8rZLKbDIIO2w1IUVspoAV\nMic49/ZJiAZSzc7LCXYK9UBmz4Lx/2FgFDDi0A3Tw/do2ayt9TUXrea/c4YN\n+Eh4wwE9elNSFKxN2J+d9mdtebpUPM0Dv+CSpXaapXwdEo6B7ls+paqff75a\n7IPZ4eWwE+sykqoe+E+Pg9x0fQScCeTchPmSK98SK95kDngyVZx7p++liT+Z\nRJZFLq/g5Y2/pH4OUM20Cn3Vv0MAn+bKR5UcWbLcgM3Cek9WSRUaQgU8/uCJ\n9a3Dea3Ma4cewwimzjRnqV7dmtAt8k/ovvjMZLRJ3qUJZkOoj3IbKdV32K8o\n2gV8\r\n=a3GA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIECiGz1Yt4qqrdy6kRKPGEFindSjdJjUKQVV1S2ic3ZZAiBqSNlDHSd3szTEq/iJepBqNlMUJGaQVZmghLl+jpXINg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.13bfbd72.0_1597087657097_0.05509732342994966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.30b1b258.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-ripple":"0.19.0-canary.30b1b258.0","@material/switch":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YcXseuUlq7e+Txo4RcthnkzfPRQfQA1loDq9WoNzXAgodSIsm3b+obhLJkg15W3/c0FwlQ2/ICwal7OIr/DTCg==","shasum":"9f7dea6afeafb92fc40b77a8b04ef28413d42549","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajvCRA9TVsSAnZWagAAFboP/j0JkGG/Rwu/G+Or4lZb\nE/0bHAABOvUwuJ20H0y1X+VFu4RlS0KMp/64A1N0dELUTFrUIdgqdHRx9BZf\nAPi8hW6rLrEI8CYGF990HhtRacrZxS2NB7WyEjUssSdsh27K8OcLgcjS+Gjm\nq3kMF2z+Gz9r5SYE088kBJiUG58f1drGKpJomDK8aUS33gNC/PABejxm7yiF\nHQs+scnYLed/W+wifqdyWzc0HSISdoADBOz9chYEODcYdng7gTtGe+AdH2i1\nSu5wX0pMFKTBBKwV8Dmd1Y7j+nZosZehqVZlbZw+o2IpJijKdRLgN5mIgr/O\n9e79cczALwhwPgqLO9a2w7g7Nuv2Ndl3swSiz4/55KMcMHfaeKag0KR/SAEZ\nvBOawFvWj6zqxhzCraAABszjurBN9z3QFLbRv+oqK0/0zu5Cg7SHvQob0iWx\nZcDErzg0rZSc1IaxrCxk8YD4mj0yFHM9vnl8gH8xSsrNw7ur3/7JAmzNLvdM\ny4GqdA61WxMCjaEmfgj5bidAKSElK3jIDjxPC11JTW7TSYIN/aW2PJRVQKrp\nILzO6LC3JJp5diN/8aixCnheqZ66t3b7Zm8anXlkqPK88uMj9gjejDD0CGbV\nXHfJXt3aquLT0qrN6EiP4EcGAUy0+1Ww4cVoJbElbRodbMOCN/XEhxqHA4aF\n/DDr\r\n=xT25\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMpsJ/I4uxU2lnTY4T7+1qaWt1nnxbxXyXiwq9+29e4AiEAyzJXQb39zoG4obOWVWsmgIpKqPy3TgpaDlaGwXW02YQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.30b1b258.0_1597090031247_0.472651396540976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.1583e263.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-ripple":"0.19.0-canary.1583e263.0","@material/switch":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0DQnpCwVbg72l2Bd7JOphEwXn/ATLBwWi+tBcjtgiXaV4iSxLd2JMZpVLiMS5NfCBoBwqvUSFLNCmMqxEuI1xQ==","shasum":"6d4b258293226eb08d788f441847f1d8d91189ce","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWACRA9TVsSAnZWagAAy30QAIB8CzLOWu9xcx5qNNdQ\nbCo2wDVp2B1jpnSuTBm7Mr8/oUp1sYhvCxsxW1yaXSyl3WXpdG4E58ItsFCA\nSNXzXSjBy0Cw8omioX+7tlGvU9nw+c7fLYU0fe4wL1HzB6doR/ICVhnaRKxS\n5YsVIUbDaIAWEdsg3PhKvo4adnInbSgG2hNJTHaCqPSmNP83h5iXu0hI8hmM\nUBk63ia2Rkqk2+VjoN7Pz/rhak5OC7uEtzGsYM7ymPHJhHKZ+ymOoTE70pIz\nC0o3wIIcg1ENx0wzbL4o/g1n1ECfFrRqIafwhawR+Ri94hoy2lD/fXSZK4zk\nTdI4HGEaIsyRppR17uYVRMc9pMJkXpvpnN0CF6/cVSgcP4+mV9VZPB9AqjgJ\nLBJurIoqj1pei0yyYepGVfHX28D/dHzvi2hvywGjZiT0fkJGqtWVhneq2HYi\nkBBi6bsj51uZZRrRtmJYCwHSFkJSvTLsrfzC+2VYFjma6p77pHOl6vPGo9LJ\nwTF1oD3nDQWCaHmeV5o6xUwOYX5swqbYr7Xe9DXy/hPPMPK2GGRhmwjOaHH5\nKbs/GFrnyN/XEGX/UBnwlujIrvDAMPeBSuDjcP7euNImDDgP5g8zOij//k51\nFFiyeHAZZBRhy9MHrvNpYsZVWkrpV8WyXwR/PViJYRqBDXEhh30+elX8IYwr\nch1g\r\n=LTUn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/yay7FrfYduhyPxDeoGZ+/GN0hSXafz7RdLH0bIKWeAiA0xg5O1WrDuQ0Ok9bTOWl8TvXwFYkks0uz9NZPRbgS2w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.1583e263.0_1597187456368_0.9985809377505526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.fefb1a93.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-ripple":"0.19.0-canary.fefb1a93.0","@material/switch":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TSGuPGiIzpnas4nOpbY7PZzIZmOFzto0TmMZUP/8YdJCMuq5mCGYTne+F58+9Q01PUcRhHvReDeIFLrevnysiQ==","shasum":"702a3c1f5fcfc10e15279c1389b5ca566e02dd0f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbyCRA9TVsSAnZWagAAk1IP/RKP+Jdp1QbN71FgFimy\nkR2LE/nTGQvw6RFdIryNGF2sWTk5eeabZYRPJIkc9dFggEzZNSf98DPvF5jK\nd9iVt6Mqgsx0/u5T3k5pWHUpuwUyjerGN26GDWsKjc6V5z0cDML3LWeGYfUk\niZ43Iy7/kE4pZi5olSK/D5mE3brNL6CVeMP+TdolXAGGkvXzHA58PAS7bubV\nbuZkZS3Em63OrA3CdYDjPhJdl9ozHAUL4b0w0eORnU0HNT3E32Dfw+Qj8A8i\nf61hALSFTefYt+GdGsPVDHVX7Y+yakhryjmU/EvVPQVLMsw5aNsX7K6MjRoT\n86SQg+gcfqTMDZTKLuEaxD5dPEmla9LCX/cdl63WuROEB9gp6QFUXc+QL/Lq\n3j8vHykJgfnT0A1s+yDc3glz8dJ2NogI1QabPiGugzyv1pRkod8uWuDaUFza\nVPR93qji9tGaFzNnhvzcHzfcOseSF3VJG8D5Jjr0YAfjo+qkxUte0m58G1Cv\n9fMtiZs5Mic3UlPSTVp0O5dVTBUG2I/dcdbRA9C5Mbe/prnyGaUEMmlpKNcn\nndRr+WiBg3esNT7h1WKhwbEwHpvtE+7q8AtxRf2rbPZnYsc4qPiGrERq+heK\nQ6fksrTE6Juuzltl6AXDwErsI95DxWXq4b32ZwTuaae+DozdX86aAbBr9nkJ\nKU6U\r\n=ii3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVk5nMAyxtBdm9vLf5PABlZGzjxVHazXodwjHQoHHnIAiBcLU0zcNf01TFKRKiiTrX5/g41iTVbPEy1KwtecejHvw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.fefb1a93.0_1597191922060_0.714270559243978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-ripple":"0.19.0-canary.1ac5b9d4.0","@material/switch":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-d9NI5XKl9NMp8EkEijS6Yx7HHuwSM3sQ3eKjpio4AzOpIBgCyNLb7T0XzZ9KpVp/h8/XzBMRnuby7KW+LyGCEg==","shasum":"7ce170228531a4e6902d548acdbaf02a9bc26b2f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSbCRA9TVsSAnZWagAAo7kP/0QfbgbRvWXgM1T7mn7c\nhkyLrzdGd5hzrJ6mGhUsCf+m8L+318NHJFscBPij4EBOcHx5qn8jM/yk19WP\ncwXAbpVf/X5IpiAuUF/WViHq8FW5Xz04dahhBX4Pm0H2FIToicSkSTHSZtcn\nX+2bNx4mb9ODTmqRe5WsElg7FJLRpiZEVaZGs901GxmM+2351O7zgZnKo9Yp\ntnRh16oeNztMm8cSbq0w7uePSbY53WFBBs6Sj1VWky0t2iTc8YTS2t1i7PBY\nAwpm+Ra0sh80LVFPeCCVCpkbqxdY23KqIgwcAwiEMhFSHSYYXI2QYDke06cQ\ni8jyKS9ICW72a+NhAcv0uX36kYT+vURp0qBqk2QwRohtj2Yv6uD5JRilOlpP\ngBUDFBzWHw+dOenxDruYyFqie9kcMIEmiufsa6NC0TfJeSStrbsJJKQmy0cP\nhXWWYZXS4HYc/1m+WKhhbCVEjP09JTIdonL5+L8xa/jUS6Z5mlpO0UHswZHx\nqAE0d4p1MsytTTJ1u0Lh4OgFZ3HxjWYNJlLBiekEl8hMt2qKClKkp1S0pzhB\nOKHkYeMZI4drDzx90RhNDIm5TfSdU3vVO8SRpTwrdVakYU2F644WcpJJFgyM\nGWCQAbORJAykPbYBvm8GTANM7EnPMHNtTy7dP8ebBXZeFZkbPZdMC4W2ZuW8\ndutT\r\n=WPCm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZl+8w9SSWMcAJc8lZv5oIj0kzC1E+RFFMYglPgjwWlQIgC6JFnVUUAEoQzbqFb3OnbN7wRAx6iHxt5IrC777fYIs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.1ac5b9d4.0_1597256858873_0.5592223100799927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.f17f5052.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-ripple":"0.19.0-canary.f17f5052.0","@material/switch":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BouIihtMix+TlfoH82HmjjEW6+yWFC0rzIaDZLPsjkn3PXY0LoYTPX+9X+OaEBPe/evoYna75QGc7ICZyOk5TA==","shasum":"24ce6efe9d4d9aa4c11aa2c6288dda8d7db26ebd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUFCRA9TVsSAnZWagAABs0P/RysOTad+aaaRbrWWnfB\nBYLbeXRQcJLgk2kAJI1ysIwhSYOAO5RHxFMgfinls/kL+OyniNq0KjWo1pE5\nb2Ro7OnTnVMKF2xAWs67xOhCaOhw+6isz0xnLyqr7gp9VMgEnXWWI/QDvQOD\npXXEajFw3KPFBhPpuOLEuRPLlSt0q4bpvEj+tD60kDPcc4ysYUXngWzD4uUx\nfQjgAlrZPO+/iUcTsv9ww//OVFefHnQgU0zh83gyDRHrVXfOhMKGXu7dCKdj\nPY1suLM3FR1Aj+5WigSz0U5Ny7T2lT+wS5Ze4ZWLF4VYMBd6vnCBx0L0OhZp\nxOuc47c138aG80e8vkTY+dPu8IWnlJKBN3DMG204GqzKJhG62KfcKQQa6HRU\nCy42NB1I4Ysw/+/6EFy0PjvPa8dxEIdv4bcyhsvLFzUa9rwHA8/584AILxJJ\nnsd7m4wo9QdYevZndifJaQzU9jKRludN0cR+f4bjmF3xWQSASvzvyXPSKjcC\n7OsvMeNSNbJBrLLlhPOenGAhbldBJ7Zgx7fEpK9r1trkbTMpTnTKzSLW0SOQ\nX4wlXPPQ9U32vvy4SBi4AF+0iVjBQm6zQYTr5WXkJ1ZaIrRbbp4G66hiKVGc\nCy3WICab7LpoP8GPY9MDZrPZllj2zOhtzQsQcHD16bcMOMfK6Dgz/hhL8KNV\n22U0\r\n=DR4N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnU6003CKrlbnrXEfX8yA7oRXF+EROUaNAFmNvd83xeAiBrTl7NVb1DIKJF46REF3c8BVJNI4XhtA/VaVQSmjigQg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.f17f5052.0_1597338884660_0.8396298409263043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.80b5d20d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-ripple":"0.19.0-canary.80b5d20d.0","@material/switch":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a1dcfe97c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-a9VaHpBhJGRuQz4N+5LFB/mLf3kHUjfqAh8kGeDCLMdZHnj507k5c5oX85exfYO0dnbZzyCxnkyWfuzr9jUY0g==","shasum":"c98bd326524f09e06f041500aa89bd9186200613","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":52675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYO7CRA9TVsSAnZWagAAlL4P/RqelyOBIvWpLt8hT0Zy\nGVTkVUf3F4H3AjT3MIObuENTB+0wm0uZGeVUiZQdA7lwy26mSCnVZtT7BS8M\nHHZnwDErwXq7UH1PxxOCJfQAsMJu2u4id9z+fnEFHNajEbhM4+hJhbOU+J/y\nqpv+JEfMumm8c8+tgv8g0fWKF4zEkAfNJlyaR5935xtvQ1bqrXqRD8wrpoLN\n6ttLOrqXnc6pMxfDmPz3SThb7z5w3vzq1VXAmagVGgXvFgnsEs7CqFnjtV+V\n8haXp6eOWq0e7muos+zH2faoAeSbD19XJjdEgf37NKo7kyqUAYC2fJUy6BRJ\nTIalqcyipu+P/Y0qPnQMCAZVUvBJgV1qUg5i9qz82kI1pNa1SdMpKzRTtVGK\n/XXFmH7HPLTcXExwDM0k8LydPC5Dy4UUrTkxTcjCwKFTvfvsv2/+6K/zQ1tw\n3XxPeixxoOE3okhIYePU9fUXjTNrP72aqfeDemlkf9GsiE1YAtmtk88+bpYc\nQOZpFpaAnkzgfcqm0Ahj7KvgUbmpIg334gt0t9AZceJCrspWLCi6GTRp8Vpa\n7gilHAi7YoGxzltoHUoUA9Z+ENNuBk40roWhv7SMF1qWVtHbvxYjvSXF7vwp\nUsTIk8LLQuRKt1aMLJipPGFpkOtRke31GrMoak0Zd+y6j9o2MwyTtkOISyjH\nQ+Kr\r\n=hmEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC18Kl4A1iNMZJ3jEiS9KWIv0Wx0FIpQR+EKF3iMIFaeQIhAM6P/3xobylNdfkalMTpc3nCz+ksnzHiLd3jMUMJ4Ltj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.80b5d20d.0_1597342651509_0.9822522240541787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.758635ed.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-ripple":"0.19.0-canary.758635ed.0","@material/switch":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a1dcfe97c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WcxIoOzHmd7F2Vfc1HQMv+u7+X7txYTFtajpOYfUWFP7wWO/YduR6Wa/R/lf0qdlH/DOg8vD9x37vH985O7suw==","shasum":"9140cb5e7a22dfe6eb57bb90bcdfae48759ff2d9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":52654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNscICRA9TVsSAnZWagAAqBQP/iG3Rnnrv1ihnqiF832Q\nPB0Ps6tczsY3axM0boA/7VDZsdbjmzLDuLUnbByN++o5ak4bWDILYclikxdG\nMtaQJyflQzhYv8XSn1VEmkGuje0YNyz1p+wauvzpOSS7blkyYZftKSUEvmvd\nspIKwvuYq1nLj4LzypDcmmZQUP6ehYSPgrLsRHR2QySJrQQOcAnWdrKoDAIe\nYnMK324NpjrOUro/wz0DE56iZ3rqlTgxlP5aftgSBR0LEEMu3KUTejdgNiN0\nMWFg674i0ZQxtcKQ6c77/xaqM+xrmkkOZAaBorvq9fSG/LVClqPQy17nHt7e\nEUaufyUjHvKPO20fv3OUpzYfWCvJ7R4BNojI5o3dPKzg55M1g6cCiLs3eEbs\nVjUUI9ctvCZgm+eZx0laQrJ9ssyNr4KJZ05fSEXla2z+ypQo2sOUETwRB5ij\n5Zp8LdYJjBggOkicJnMckQtmVOEVtv62gzsRXvHF2D2/oQl9WQNpPQ55NhWB\n0KxF7v99rBW6Uz3jHVNEQHeJ09NHeIaZi6gqWGgXtMYJ6262stxoriRqSF5B\nnLT1IKfDj4xp46z+17CtX7QxDSNcB49TtmTNH2o53VO5ongB76Vuj9cTCwuU\nMjZrA7SAeA9gkYEDDQSLfUBQqHLSkhknhbjehs0Y71YRWTf4Vy2CiYVon4yT\nlgbo\r\n=S3BR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSGBXO2f+exE3CkTEsoYHSMPn5pkuyp3oUuhS9sDMHzwIgJ5sjjY6Sf9KAeMBdODjNun98dblpTdrJYTbXRv4WVII="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.758635ed.0_1597425415654_0.2721293361670445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.18d6b808.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-ripple":"0.19.0-canary.18d6b808.0","@material/switch":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.150f427a0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KAs/K1vWSmNGe/0zAEhnWFOo5uIOPCVJt1EqIa+Ryp+H2bemLNt62Ok3VCLm/AMd53LlEuHrxjBlYelEuKXeuA==","shasum":"173ce9ceeeb56353ef952e8379db1caa6d078542","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":52654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlhCRA9TVsSAnZWagAAhCIQAIAK8UWQo+6i09KdB1kL\n0+J7u7fNCIX6lZvu44bBrEHW83gD1jmCwyXDpkF0Sf4jTHUEZJHvF225aEI4\nelsMwYKoM0vmdrMxKY7rBbIe4a91k1XAzHa3QRVbhZHP2TYQopI5VqPZpx5P\n+JkU0Yk4LDYxL3IisDBmc9gkQt1LZruIHmBKes0ACJNdkwMQQC3WxhMnsVHq\nNxibXwa3bp4EWR6oQHC4HMVCmjJxc2NTHHn7QFv4JnirMPjAZZWaZ4frBlKo\nJGW2nfqKXv6Uzthb2UXdZHkwgrK1q6mgGr6Gbnv/zBYVvDLoAwuN3Xci4TXO\ncxCrG4gsutyNdRkShRnWvOvJrxqQ4Qnvxcla9N5ksI7kZsVjt+WMP7wwyF4Z\nV4RmmqINLtIbsRgIuwbo4+w7E/zROzhi2HFLjz9Obg0lFak2oiLoc+xNltRS\nujRVaCoCsIruKUSBG6XPlpfb+q7KVu4MkJZbHhjPXapFvcBNpDP6osO4sK7x\nyRVbmrUS6JGER2wA2b6wd805xqyY/2heZsBD+7EgwD9V/oumDX8O0tH6MEk/\ncRLZUkSAROD4yqAY1kXGXROklyd22v6yqJbmM7nvNOZ/iVsxgI0WcOLAEgCW\neQCeT3FHQCliMLda6iDQzBWJAADdR2PBdoahc8wZdUW+7zI+5PUW1HLxmN/3\nIhXx\r\n=9aqD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH6MwG1rXp7Q5CBusaKlRnCAUnTqA4G5apNawwwLWNoFAiA3FBhK210fJi5dcSJ5bQMGMcZC42LwfshCaU/OCIfqHA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.18d6b808.0_1597446496677_0.07611835125527433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-ripple":"0.19.0-canary.5f8ffbd1.0","@material/switch":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.150f427a0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Dz8mwpGLgQVJeODUe/BGoTsH9p4p/SNs0sZJ5/dsHLZ1WY0BGO+5nbzNzPut8cRvt43qPjqSjz2Xe8jcKUXMRg==","shasum":"52b081e6c5c9318be15d5fc03ade8561d77d885b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":16,"unpackedSize":52654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGPCRA9TVsSAnZWagAAS24P/jH/mJ3/CGqBUiBnSIPi\nB6+RDg0w+enr2HFtaQC8HCPXYFxd/5C88xjYqZ4tSH5KPbO1mCZG+io7AEvm\nr+K5Y87k+Ut45zmrpGUBhWRlLFQnE8LbHxBWJ/GkJTHdFiC7pcDER6KkygQU\nQckubCN6SKsM5kU3MRA2b5TpuHMQZTMkkhhLOPz1b4eaU3IE7kTzQIrHRh5t\nomM5U7PD95KR/ENg+tlIo8GjCj9p7ILnK6ssuRBHEzVDJ03EooLY5sPF6htJ\njlQFe1WnCLoqRfdZyM8109WCiPuTYWVhQMmb+T9ltebCUbPmLIXn8Es+nMYX\njbZsexGlh/7MQTfJhDmKQQDtaitD2Kut0A9BnZnUK6Ceho0Cn/g+Lk2K7sHx\nFjp2QLJKtf5ouJ6LydE+szoaSDhGnj81epyr/IdFt+jnWfAR96/LzxzpZLCK\n+i0Z5o+uaOri79CAZQwA6To7UPrMGiWnV0AkqVyJZaaHLK27z3eZTlnB4VL5\nPwXr+vjBvcGCD6bXeFlGyVCLMu1y1dyeptCWZQKGcxazT6xZPwX0QHnwnPY2\npayAIUDOtJrbC0sb8MNdhQYbjslci44efx2ZUD604a/pCPxTghPfZXClPkx2\nabgclLCJe8dDlRVnRF/Nx42ygvg480zOF95V6QNp8dfol+IG7IQg9dwEEaK1\nK1Nm\r\n=Jx0n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWntBpu0SQQFcqtPJgbx4X6FYLisjCbo6Xcz3kicRb9AiAa16l21xlY3toSvhg+w4n2vi1vrWAEqSqecR2UBgPIhg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.5f8ffbd1.0_1597702543088_0.2784304698906215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.8604d59e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-ripple":"0.19.0-canary.8604d59e.0","@material/switch":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.150f427a0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CkSeKPHP0lOcffaaBVo3S/ePyOljIbCJxIq/nTM/WrdMotb/LdS0mkNNiqOtb6viJo5VlaC+KoqTFQgFAC1few==","shasum":"6a2309c67fda86b1eed1c4ee0f00ec3eab82fdcb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.8604d59e.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyi6CRA9TVsSAnZWagAAs1gP/376Jhznpemoj58M7R5a\nAgWOskB7ATeY4kUvN9KP8mwlPzrG4ovjuEOwp2PdXmgb2NS7ZpLN+PJOhKwF\nUDXhetgrTvm3XqeOhlrWqgByJjpT3g7WAdOwkjrdOt8NsEzcfVCzutHa16Z9\nNwsDNwhKqzu5MtyZ4gA1LwHn/4iEgNj/XDuGZrZ39mg5JnOdyTYefjfjpbjA\nh4vjJcb77q9PYk44LpkurzS/S6wHubmVb2RW1Xyhe/Ry+J2bcrElNfCWzJzO\nC9bOZCKlkBeAJVS6U1Clfwb1i3pWzSelS64fIUwuKDq9/jjTzHyw969XfUco\nal1YChPWWnaZMzRHrI067ROA2T0rg9+mtTiV33G+My9DvdnDp1tSaWeBKVue\nOo6wdRIOx/CEN6k7vEbBjaFo51ZEYO4yxxKB4kDLtMaX0mpQtLblaEebmKwh\nuDBrRcL/PUz8EfV7K3trX2tcLryD8Vu5Os2coKDo7CV62Tn5qkN+zaCe3/Gg\n6BA3oLjcjY7FHR0PAY/7cJKes8Ey9WKCpwbLzFe5T/dIMJspmpoD1mYbxtH0\ngQd38ESW8XA8/4UZrghSOLJxuadGtTzHnJzLP4I5xFBDUaMvY2OVDNsvV5b2\nD+Lw5aTZBeu8TdqpVavukH6dn5kavln+EhioyqoEOmq3Pg/GBaxQP4QFDeNw\nhVuv\r\n=AYmO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUEEFPNURU5bLyT9PlVB0GR6uthIh+strxCJqKM/JaVAIhALJFEom/VKkp+NGeIC+2M0B1mBX2REa82GL/enqfyovL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.8604d59e.0_1597712570247_0.9755193760346033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-ripple":"0.19.0-canary.1d7d5e34.0","@material/switch":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.defa599a8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pWQHxfdj5Tso4xBzIUqeMfbqFK6fhq6YTiIjykEl1hRfMpI1262rvwVEt0NROTbUjgAh6yY1Xpow7V4VdcpHJA==","shasum":"35419e0a94fbb77d03bbe380834d739b2d47ce2c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.1d7d5e34.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyo7CRA9TVsSAnZWagAAH4QP/jh6uhs0DfFd1z6G05Pb\nax1CMI4tqCs3A2w//oek3r5GcJnbBOtL46SRBKIZbvyJhAv4Q9dP3MyKQOTi\nEdo9hBIdjcr6gL/6N9mxp4lRlEM9PhoRlExLiTVo//1VlGEN86CHpbvgjdU9\nhn3Rv2GeVeRAPqPY1vBEOBx7uI+P9lpVc7Ekx0v7Wn3VoHSPsPHuZJuqofiL\nqv1LS2GUqyzqC9kwkzX2isJZWPXBthsButhmnCRB1sUj7KI5+etPIuY8QqgE\nZXHQsPL7bFLuWTypkkji7mAOH4djELrYCbCeiPAvUdC2uLpkuBw75fnoszor\nSlQHWVPsknsKYi2697SQdCk99fkXEc2glBz0gOJdEREu0eiBddQFroJMYmvm\nozJD8rK1h1X+F5HYTlfhNu0+KuzkA/l+0ELSNR7UwFRC70laMwFBc2imLiJI\nT6VTe1qQSl0mbMV6XZle+Gczphyhup8/nVSDSifnJs0o32fyhWLSyYnbQKQb\nX1XcMMGZbbfR54FwB2S0S7d+NNWYhQrQXhIa60f68ML1GvcOuSOfsR4s0qOe\nOpcCGGi1WyKLfpeiKzthMW2kHi1NtagvQ9uAuAvDiA4Ag0/T0T97U4wOhI4t\ndPBxXTxwcZneYa5cM0xfw/N9dLDGlidPcxoI/cpYIo32YxWEpAXa3c1E1Uml\nCjr8\r\n=eli/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGm7xKz2ea4dtQ407YSOXYXnvOmza2llPgPdgHPkYEiAiEA9mFq35Yfuk22LRHijuhluO4Zy1VLa3BTlq3WpgPKB9I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.1d7d5e34.0_1597712954660_0.5031181805161129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9cc95c07.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-ripple":"0.19.0-canary.9cc95c07.0","@material/switch":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.defa599a8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WoH0OCNLiNhXFJ0C32bqOwD1s5ElGjvYI63uo7CMYbjA3cFTsaXFeis72XUwx0UiTBZVmhaly7O7y7fX5fA9hg==","shasum":"605b57e41f8fabf164280dfb2ecec1ad6b2da3f6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9cc95c07.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywECRA9TVsSAnZWagAARwIP/1KR0eSiaTiRcBqWiy6/\neLRrCN5I3WLiUjKyfd0z7nKBI4iLmMqi7sZwFsLZ+R6M1PEc5pln09KGikKY\nFmmLQij/4z6yWD8g5FXPCt1KPzMRDpBOwP4NLKr0RUxdnqh7PSFBKC2rofl0\n3TrkwA+hxPaN8J3TnILBuMrEup23g9h16g9Q4GNRqPcI9sLCZojysmvDUVFW\nx/kJrCVoRxKsVt+uLzw1+QMuBUMCD5/+owosKjCZZ+DLKl7kMUrkRhq1oqYc\nXTLlg8xVuKYsb9vPdkubn1U6RF0/r3sBzOY1vvmHMaAUJ4LNx7eu7CYnR7Wa\nmBkj8ts+4Ly/sgCJZPBtg9UiWJJXMCIRU0G8SWqf5d4Yno7dYeu782ARzdwg\nbpA6s0tU828j6my32IAdpovwzByLnwng5CrqoZfw3pSxuAcRmNFNkQZhDGsM\nA+YBKobQ8tmQOeRWp3QFBAeIQq5OE4889/grvaPBZBIabNogXqm3HBJZg8OB\n9oeF/QB7I7Opv9swdPFw6B/tq94WKVyVCVIG3drM+j22cjPlFH5+JBSZWE1w\nDnv0vy5uQi0eA7pnuo8wVbZNilvvy+NwANGdyfIRaoY+Vk3aJEQZLmBMEFBn\nv8Q0xxmj2unvxgMf5N3kzPZY4MpkG7oYKv3LGLm9jYGIhGSVUJdX26wOzGaG\nbLKp\r\n=3tLe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICU8sJDKF2AotYHkmcMU4DGGnym+iFaThlYNpCHlL5hvAiEA4aPYeSBfqtuS3CYOIFaXJ/QJ4hl0kIw5GPPZ8l7OXTg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9cc95c07.0_1597713412454_0.7560124559429895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9f65ced3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-ripple":"0.19.0-canary.9f65ced3.0","@material/switch":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.defa599a8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Yp710P739ASVs3StfEJR6iKrGDMCjoaGPkvsKET64ZbHiC5n2u8CChK60f9ZGOqLfDCWyOiXb89lltGzNnvfyw==","shasum":"67ba55913d7e63d9cfb22418b07cef569b5c9dea","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9f65ced3.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcVCRA9TVsSAnZWagAArFcP/2oiCQcXSTDhB3CiQf3r\nDvlUD9rAFlqys2gZ95sWumQhaTyGHMzZ/tVq+Ezmw2aPGegxZED2W5dgr2tY\nNMMUsVYItPk7kxhq8Rs6zMgASTdRrpVvrmR/g1qmDmvak15b47thF1ShmxvK\nXjjWV/fGYcaL1+1iNt/P8YLPjrt8SkDnVqAgFwtZFiaVC39byK41uLYjAMjL\nKVpYtz/wel3AzdtCgTvv1VPiB7HLr0lUGgO6y97JktMRGJRWCp3GRhQ7aQk5\npz2NuDW5BPzRnRvsRnDjEpq5AbXz/E7rvK0q99FO8M8heQ7mbPVFhjLZWMVp\nAc1h7azmIOknHkVnQhnNr2U7CQ7hIHycHfHaEA4ek1fiwJL6dI+bMWoBNKFq\n+1dzbHsoxy3OgsPkjcVS+TtMZWD/rRj127OfuqUQzvz1I1zm7hLPpQCU300G\nyCcBjbFwIikp0z2Hh4odH0QUoq9w4oBh7WQbqE2Z3/HfTAheFyEYO5J9BKom\nQzwt/MNQQ5caOZRWGHZ2GZ6plFwwO66N5hg8ZL7DeYHHpLGdVEC1M/5Xfebq\nKqV3ozrI0BXZa1GNh30gm3q5ylPfeM+RSLVAY6XE+IC0wlWtCcTLA6fTBdgW\nkc6NP4fw7TugLnHo5ehz81AYP3DpF13Io8zlGRt6wbMN/wcmJPCk5MheKRBO\nM5xx\r\n=WIo8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD3XrWxAf2u/pNcLZwQG1yH/8eq27+naqIic9CkziRzQIgKOxobm7OU77/YoriJCx/kiDSpaUIhI+bNNpkRWS0iQg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9f65ced3.0_1597781780784_0.9131042294186353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.5962b365.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-ripple":"0.19.0-canary.5962b365.0","@material/switch":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.66b8ed7e6.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nziCDANYjKVD2uONOMINWppwtVXR3/NV/yORqGirvHPkZTYdv62abqTRd2lAaZRZIrDAy+7B8BOSJrRQNB6Yaw==","shasum":"b32e8332b2d9f4fe39b88dba04edfc17eb181354","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.5962b365.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYudCRA9TVsSAnZWagAAVx8P/1yfW6mAdNAIyGpvg+8C\nD8w/YzAYt1nLAQspZPNls+kfk9dpAfaMZ1nW4ma0MvR17MZpQZk5s25EL3SN\nrpWa7BhKsxop2kQ/KkJvepDSH1M7QRgFiTPJwsQ5hWireVYLVSqvzClScGcn\ni/AVJIoD0pYdQRJc8OPfL6IjaDHZ5+oRCrvjzw7b/ylEhWKqBVtU5y1/uk3A\nd1EOSqNOPzr2kfHJaKlOBR1x9JbUidATaH+CKoWeZ1h76KmF62ZBB6Yoe8ay\nPuatg/Jd1jgUFflIGNi5Py41kkJb40LFL/l3NWqERvAUf2vXrPfs5oS6UoRl\ndlfUOvMfKOFg4iJVjUrvgKgfpXjQS6WVfdlYkI/RdBcOdJxLi/sVcEgL3nko\n14ve8b5iUNfL1rboUZWrCwQX6IDRryi23qxgknHDICgBoJ+Sm4NxeZ82GWFw\nuKMlBuIJ1p9XtcZYN+UAW5GG/KQPyDUjPi+i8PMo+A+WqywpOVLPr0Y+6Q5Z\nVTgYs/fbb/l5vNVFCrKjqu8JxvmQHg/trHDW08qw31oeYGxpd/wDJW2gFsZW\ne2vZHsERbfAd2rrQJ9bDdmH9VCcJehuiXzYn85b4Pq16Hx7UNmu/oysBP+xc\nVmz0JjsuSuKJASp8WX2Ni8mbA9JUt5iA6TXHY1IRJMqk9mCRNyuvBWObjH24\nDP8F\r\n=Ri1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClysXtuyzDQwKVtFdD8Mm0jTvkjqFdfEJDm4929acxGAiEA+DnunDQ/63TsDgv1iKjRxFNxw9vkMOtLzqGjQXONyi8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.5962b365.0_1597868957369_0.7477043396592506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9c9ec756.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-ripple":"0.19.0-canary.9c9ec756.0","@material/switch":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.da72839f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X+u6uGu/gwn9M1w9qMYbMZWXKrUk8VSJ0Ep3HGk5RixzIxMmAUBKOl9wuAY0weLwZeKw2PIw5SwGZczx7WsDVA==","shasum":"29dc76a48746945fd2bc2af19d50f780e0a01a27","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9c9ec756.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdGCRA9TVsSAnZWagAAg5UQAJmCTUR3NwlzI1/XRLGq\nKy/QH0+J0xeHRvA73mOJi0+wMeOehMDrsMwe1K+S1Mf9t9ORZ92OF2X/gAbp\n8Wd1KNxbpsHI+CtB9d3BK3NPLwPJHZ/uXaqHal++HtgFsRbzGfsMTTFOqY4h\n6/vG6a/1ZEzYJ+hpgR1foi1y3y/7Hp1O7t5C2glRuR6MIPSy2N+QRZu27/hG\n/MmvOd9p72pW9zI6aeH69E60IOmJjFI9A65RJCByWkIhO/mhGy3Z8mQpDkgG\nPwc4dJTVWI0g0MqvAMAJ8r7sNFCiA1s1I2nRrPOro+elVgeRfogCTg4M7R8M\nn2NTcQmyvn9ZjH1SKKTdx/y9fLa/Wm+z+0YqWtmKmeEZ0v900plsxa6P6Yb8\n9bDzDAvm9E2KhR776edmIs+kz8+fnqtCFzc+EWFyHAvq0UFyT8cDxkvgkSl5\n+MsIDU8Ubx05tdbrfd+6CqrVCC30YUkmiTDsTiUkj0/J5hixwdBIvnmX1o37\n/3BRQkCsViQYLQGLvPeSVDC0d0gjtRqScq0qsfO82DcBi7QBTy23cwW0i36J\n7w6GfJeXK1CyXcCj45PliAKVPZX0xL7LuIK3dUsdPukxeLOJdEQ0/OFfnMNq\ngtobT/o7LfSqqU0Xrz6WT1Gs+VcWQROSQ1Y9FYhrUJKZASWEQftKU0sli0ei\ncEBV\r\n=4LX2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAFCUMptGyGrrGBeo0ebnRZg4ZKgcldzHBTERVJmdlWAiB6N0E+CGTW4DncXyFBoUIZhjmeIZJpTkzO1y9Y2ommGA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9c9ec756.0_1597949766239_0.023905501406671803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-ripple":"0.19.0-canary.fa0ad66a.0","@material/switch":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.da72839f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ncadE4A4W2CAYb4YRRdkq2AvRjZi3zUOuye+oWa/EO84U83kJ4oQNJytH2YhpTpH3Jrkz0VaYo/Gb080OeIBqA==","shasum":"0b6f316617c91c2907aff96fecf9f15adb69b401","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.fa0ad66a.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6CCRA9TVsSAnZWagAAfYcP/ic6oKp76M2Xzh/nTWkE\nFLq6ILCORnfu275h9/w14KK7DzqlPMWNL8q4GUw5fMJoOaTWyOzhCU9Euzom\nInXispC+cYXs82GBu4nQgx/hZ3MSHIbMj4S6cj1SECGjeLVW8ppXvJrbA2zA\nRiq0Qy1jsJ0n6FbbcoJm09ti9zcZD/vOsq69O8CrGzK9ZuTD7VZld01WlB+g\nVzkd2JCa8VWpo7Knayd4wlh5CIE8RxVkCcIz9MCSOrN15AlFb1+jLdeY0LaX\n1HR77TnjatxQ3S+ti4cS9V+t0oZmBCMLl1PzBYH+06sPXDETpV18Nx/6bHBn\noNtSAlD1XVL+7Is0PP2k2qWO+AxB3LoCEjKp9gamqZQNuSP+iUU+C/ghHAXw\nm8odRRNs4OnjEA90FhYS9yo5FhoMwqEH1Y8YufLIn2k0ajlqmYtsVScP7wl1\n2rFgLtqZQA8R7XIKv5WsaxBX7BWZFgVTcughaqZ58nIqRP2nwNNXsFj+1XmQ\n75Zi7olzqvNuYTCPxCmHre9SA9xsJZ33WM/8+EjBdE5D2Jb92teBk0WfTrqI\nOlfllWss+Q213H5KPQ8CT7T3BZLJH1vqenTsHSB3NzfxAjbUnOi53n6RFFcE\nK/E6/kk8C6aIfMWou/9fQcDrBIbX7ZTAKlft7aXxHZ4v/8mpvuCCng9blxv2\nzhOT\r\n=nHQb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4PGd2ujf1BJJaQBdyVBnL7QZi5yfCnUbcfuQl9/FOKAiEA2ULDsvLsVL2KVV1yZGi7R2cp6yDwQ7VdC376wuURO7s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.fa0ad66a.0_1597955713717_0.8757669952113103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-ripple":"0.19.0-canary.06ecdd6b.0","@material/switch":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.da72839f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Y6zVPb9Z1WZFLd8xuftdEPiBGu3u/ptyf0TzmBzu2Z31uGJ3ee+NgVfzkE4FFz6daCKNsPCx16ReVNUFGk18nQ==","shasum":"7913e55149fc7638f801dcc81e8720729c0bce62","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.06ecdd6b.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxTCRA9TVsSAnZWagAAi2UQAJ0jrjFh9TMj1SJYoj+x\nJwLDbPqTSEGsR8u7b6LphHjBy0ToOy5xaeJdKf5e+lwuofXbi68iji5VJrYj\n6OeC8lSE1I7SdgjknoSYZwlkvlVAQSt9pb11PQniwu0lMvDMQdIM/p05IA10\n0+oqJ16FG0jCOIUx7D63nAYHDdfI/zIXNg94m1kLjDqM2bBpGaC0SjcZzeu7\n6gYuvQbzs5e5BARVmMVc0grWNAR9IFMRKGPdx0femhFUnI9LblBQQbIY+Whb\nPmi0H8rwmIEdLoeEUe3UHQFr5+ju/4J/dFYNOv+xzSvWu4eVwzKgc/wHmq0N\nyjpNiqjhTePi0exzUtxg0H0nNqbsYWXIomkPnuBKaSzxFVLXFzY2REhL7qpP\n7JXGatcKs0nEMJiqc8NC1wkt7qeaAQNfzgDWwJ1A2BOEXuNkBMwJNAflLOEV\nHrfSQeSZeyQAFKCEwfPBe/MlzOYLSktYrHJ6kC3fM+el0AUdaob7poV8cCbq\nx/5z+KRCwl6ItkXIxdLongBT/zskLmVRQ/kGkU2BZG0/LoBZdmDkOsEynzjW\nj8DRHvcn8lrVUKfPLYDTYKbwKtfJZrN/k6XynmcSIhPqMJWf6HMfQWKI7ckO\n8CPFMjs/fn4uWc8lU9AdhxCsZXnjqubuc1/xWd8OxWXdoZGm7vX+wWlRPsgd\nBcYP\r\n=5yZA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGnmw5BwAvUrRrk+XIaQeMb6m7ycUIITzQ8fDKnhlVKAiA+EvEIh65tleLt338hQVMCoSzobP58tTif9ZsfqdMT1Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.06ecdd6b.0_1597959251058_0.6055135014054178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.2bca2318.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-ripple":"0.19.0-canary.2bca2318.0","@material/switch":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qRTbfkLOggT82YFyQvFtxHg0c2vtg33QWBae+s4IAscmpHT9K9kK1Ec5CmCR6ngQbwAcFh0vTKcjiYDsYx+fAg==","shasum":"45b4e0c4dbb7786e0af591f05e4e08547649d778","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.2bca2318.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnmCRA9TVsSAnZWagAAGcgP/0q2zn+wvW57/bxZqG7H\nhM33+hIVuSML0snEq1AqUXMZLjp1HmEfIpCfYpzlzbcDM6K6iUE9y1cqlVQl\ni+BKMMfTTZC+Xjjq1dnU6USPR9PtV3vX/KiS2mzyfqo2AA4iyNltT/r+pFyP\nsCS55qJon/fNKuxau1b4Celg08PcpMji0HleLnJzZqHA3+qkW12hf7gY8j1e\nYNOVNsAMbvaJZVW81i3JqCbIg+JrDXzkb2umYzBngEi/L7jDfjITgFPdXn19\nw/BbD5VJpOrpEgWC20mjN4Q4Xr8aDd77HtBcsrpVW6mn9a5hmx7Bb0yPUSJ5\no4G1TDzk95ZWjEOD3HP2jfOWQmnZ0wzPTb69QTxOu5DdauH8CLrtFcCU4fG5\n//zZVD9/jU/X4q8Iatt8C4Rh0Rfo29HNaALCuZBBSpk0Lq9WdFfy629AZkO1\ntLz6BlUMy+z7uyDlfgy/HL8xyWKp4MwXxfW1nJyKpWX0TILOIpLsuK4ryM/0\nUPIo2ocmD6utpAPcWWQlxvvEsIyEXONG1vxu2w0vXnKlGVDr5aqDgD9WXiVc\nPeS6v91Isw4rpJNz66NeshEI4aHTck4R+4FXggjIMftl+5TNm6KaSfZASvdV\nVfVQu4sNS6MJQ0bpiySS8p99o84YQrX+xZcLYx1qqits4FbZ050V0I/OSm3t\nVRY3\r\n=w1GZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMwm+PLU2ah21RlDD0JxU9Xr70hKBWGupcssNfHc0XrQIhAIJkDSTMlYqZLYEwvh13K3GM3+L2B4Hl4s2GMpuVDJxf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.2bca2318.0_1598032357991_0.0053677075494904525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.6aa47265.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-ripple":"0.19.0-canary.6aa47265.0","@material/switch":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-82Oarauws7T3YmhPLKLd0ZatPKExaAj7Y+XEwDk8uOsH7YHzJ1FM8LjfWW3AQ7wwor2jOU+X51oxesv9Ep2h4Q==","shasum":"9b45389fce5fdd3ca4fec30d191db6b3e40c4db1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.6aa47265.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA92CRA9TVsSAnZWagAA+EgP/1wDutx95a41HHWhN/Pa\nC+T9hRVGqwI7wJmW0iVA+mVSS3KdJurOhLG0cmRS1KytNgV7rM/Qmisz4F49\nWUTGFst4tpe8Xarxaz8Q/nY4niRli/dujOcGgl7COjeWevgQJTVXCKGTK5mw\nOf1xeb1BpZYCu+DJ/E80ybnys+mIV23tJmTTGZ+d3NqlKWVnij0JpVbmIxHm\nhKltxX+bJXdVaHnYwB86R7owb92dqP8f4V2rY+ur3xgdMPScXgkak13x0Guo\nPbGlohMJKTUJjmTb30ix7k1eofUIh6zdvxFD/GWak8bIZbIvrFgBLMN6OrnQ\nXyXPDmiLlpcE02Os8bhcpQExN72QKx2NGG57OJgjQN4v3AbAeuO47cJkKpGe\nkupAphBnlQsBBkM0oV1EQAf9PJa6DwKu9H1TAfnrXixBlal0flPbgcbQP36t\nWlVSfoEgl4z0l+af8A4rXk1J4J6w4pKlU0WdNTS4gdkltQw2sWqof/0Dlj+a\n9mTJ7l3OLsYTW8EU948wqdt2UerN7D3KMr1Kaooqv2jjNbvOp0XrLSGq2vAO\nwXZ44/1XmwVag+G612nhhoINNk25OmbSRw6gaXBSvlt36ais0MOztC/6YICo\nn17KwxlmJM30NtGZARMY5rgAz6DhJZ6RHqNMW0HnNU7rLhskEOcph/ukT6to\nUbrk\r\n=+ZYx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6jahXKhB6NsYd1o0bIykOYOZrIj929hyPf+VzdC76NQIhAMmHvBBqeyz0lv5B78k4+s8cVU9BCGV7bIKixWo093um"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.6aa47265.0_1598033782531_0.5587165671796095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.e7202a07.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-ripple":"0.19.0-canary.e7202a07.0","@material/switch":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GH0+ifPUa6HnPRlhpIAenu+wDFmsleXPw7nYilhimKGe8hwyMuYgCsv7Ssx4K4QK7KnYacneymiR2or0Jv6yKA==","shasum":"0ed36a0a1ed0a284f007ac8e318b19dea39c8015","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.e7202a07.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9FCRA9TVsSAnZWagAApVsQAKAeN/VQCzi6VWTQ2LwP\nN61wPpfkLJe9F9UcJgO23UwzGE9RG52OVgyz57ReiydP6ZY26NwUCVGRPWul\nELN6eOGPto+swu6Hndf+myzfTfrEhxeJgXye9hW8WIrMPAr6npEVT2ccEsTJ\nae/WgQp0JL0ZC1w03pZQIssPhtP8ZF+aEDuvWLNBmPZCWLF/ztKX/Qa8RnRJ\nVSjWiZoVJz5+AXA5/PnoQN/Z8VJWoG8GJzeDIVr+AteEkwfO5cib3wHlOFMY\nuUv3HKkvYzq0c72V8SLC5/xKP8QZ+V3Elo/7nfLihkH324PXFcJAyhree7J5\nIMCluHhuDzv52Y2Qj8hps4fZRJe+KRjnCbspG/vklxOz/t+nurTgO0NGr4Fw\ncLrQrBpF79ZtDhqY3eimKR/CtI7fuRszh9KkW5sabmPw1FHXmSYLxQo6e4gh\nZEaey6Llw/MFqCwMZwdROd6j9KqeO4ydUSjF3r7RJ22SSjHStv+dK48DRyep\n5EFfK5tlqyjuBe3cKRF5CLWNTHE1bi8aiP/koieoqo0miCOzX+akxKNkuCal\nju+hGLGtyw4huf+WfBjCVi+q3ViGWnBvuwsrWddXLLFBusQ97wbhsu3ysHq0\nmwFq/fVxYbz1mCffiDaToSQ1wSXXLV48qOCRP0Vvll1FlkZuhYep4wMkeue/\nA7Qd\r\n=udbM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDE3GTwW/hhv+I/XaOcxoUXP68pov72Z/mTNGxv00VlAiEAtahtEdtXjtIjMEho8p2WrcvKNEvpMdcx7rSd1PfIcNI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.e7202a07.0_1598037828854_0.40824466937611503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.f208201e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-ripple":"0.19.0-canary.f208201e.0","@material/switch":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.238216fc4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aonK1+8PEBZtQf7Va7QunsmDVc4rFb6zAIkSib6/zEQ5PHbIg6F1BWkmwJUokXNlVSf3saJe0U22Li5Xeml8kw==","shasum":"800fcac9c4987968ce21e29d07b809d4421c35b2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.f208201e.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7+CRA9TVsSAnZWagAAgLYP+wWMNTjUiNDgcVd8zX7k\nxlGuyOW9R9eUeIxujZsvm9trWZdNmDyp9+nI/QRGIvWKEScgpGsdRqu1op3Z\n9PIcvU7K261DR7zoEAGKxV2UxXD8UGv8O2gfLETNY3xM0AgI4V0H7e6TYbL7\nLL2GD4I/Tvpg9tFJ5BPN3oFl1NkKczM6Axva3PiJ344SW0JEUxTFMtkbkA/B\n6UOE2XNU+NksBPqtPWIcuE9qv7RgoBXl3G1SldUYBQz3PiZ0UVieiqp/X0sO\n6ZM+sSpE0csgaKcMRKfTh1G0PJo4NdJCJqjzccuOS5DL0ttMxPf9VX3M5evq\nTQm7FFlK4z4MBXDXe6QliLzDUwqmiHmqV9RNLA7ggXGE5fHqVcAjJMtf0MkT\n4o0SopKDk+1WW32cph+jZE3btLS4qKm/s0kGFGZ+Zgzly4J3N/6R8kTTI237\nlo48PPdSm1biJJ+6tMI1P7oDW8mpj4U240ntW3HdL02qKhJSlYr73kGKM17O\nq54vipIL8kI3ex/cr35/Jo+oJl0CI2ZgfYDkggDX8+1isaeKiCiOgdrZKGyJ\nzTVkH0ujuUa+iNYHGjAs+NDzvQ35R/LRsY+E+vk/n7spQ5NVJ28DYTgpm1P/\n/TJQ/9TEBr6vreUGoIAO8ZykLfSgVvNDoknj9WYly5fu6mN2eDYNv3TJ1/pP\nWUuL\r\n=FlC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDKByvKftaISxeSeLmlWY3VuPUw+iG5VnTMkhudpvbeAiAWJKDvMxonn7NA7ny9b3hj6tIHW4TieX7XHHEmm/iBMA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.f208201e.0_1598295806328_0.9926964725350811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.14a172db.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-ripple":"0.19.0-canary.14a172db.0","@material/switch":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.238216fc4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eMjurlGZTxvNZbYPLrDgk78OOIzhgQsL9oS+iU+cA+JelhFzzZPslmZsuSfGCH4ux22WPPz96XUhwlgLg5JkUQ==","shasum":"1a85efc9e373c9e07975e956aba498c11fcbf80b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.14a172db.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWr2CRA9TVsSAnZWagAAMNIP/R6LZq3SXfIf1nVxLd/6\noK9j1YSDkYKtFsgVetJe/MrihKuaH6k1twEMmVZrB5MI14JmM7AcGXUtYvUF\n5NHLK2pGioZQnI8F/+MRWTzk0TyAEcC+BsougRNF6vx+XqomlkOI6Dg0Az+g\nh54Q//JyYQ1vKgnSLpycFZ5C5SsfX4QVKOLbpo7bt00DTreYo1+5e+kgn9BY\nPyL2V7la/jIcrsNrtPk4g9PiMFY03gzvvmliImVAzMTDy5uvTUPkysVjqQ4W\nPDgUYsA//8FJLD8Rcqq+2CSboMqNzFJQqsSRDCb0z+mLSyMf6bME4tYRGZqh\nQSwrPN14lAJusVoimxEB93pf2rkIdzHMH4eGLg5cxQcpDfy5aP+66YDEOfuG\nwrtoUeBLPmGnzQnJY64Rmi6iBo7XbpDaxmGA5ExWZGByHfpNQx9Sb7wmH9qk\n8IgPAn2lb83Ruw13X9URFao38x9j9mbZIpVoG04XBFbL3cXIlVlUOv+Wd+kO\nWtb74w2NHsx2CuyQs7Go+5ZyxLB9mEUQrly999UZRzdBectVjBpcdy0jSt0f\nFT88HqWTfS+zHE4/q9898dXhfjTA/GiiAawH43QSdPjTtOJU0ckIZAOoO176\ngMEUIfsHbq87fvc/Vo6WmN+2TBvv2K27z55ZA1aroGMLVWQV7/0ZcXvgJhEe\nSzBB\r\n=LxYZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdJWC9Y33kdKMDK+TWn3E9Fq72XpJSwUoTxndE7AqYXAiBlvDPp5dKl0tzMLAID5HXl2g88Bvd0bTrpCmrzQd6uWg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.14a172db.0_1598384885777_0.24762934956599603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.e6c1038d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-ripple":"0.19.0-canary.e6c1038d.0","@material/switch":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a1c65593d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-denNAOOBYC1LD4FjJEEIm6J9BPb6V4FU4bKE1DIX27bl1A8GRL6L9dtbuOQUtwLpbb9E2c6NyCJL5ds/RciNOA==","shasum":"301bca3f94e479692309280bff2a88789f6a9894","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.e6c1038d.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtvCRA9TVsSAnZWagAAgOMP/3Rcno9R982r58MtPJFM\nvRh00RiCaIlhxb5xa8ov+gAlH0d1gmmmNwccn/dQf25Rr7R7ozrkRQmU4Rbs\nI6a9RiQsPowIQ7E+IIdg7E5LntZ6dDC7LeHmDrpM9bIBxSFbQxzWEdxiCdeA\n0OCZ0tEv1wrQTi8UWbfGmnjMprg5mhYnY/N7fDachNvdTambvl8Te6shmA5j\nDU2EWrHJWV99F8Acb1kwxRHqYP6BaGqIKL2qqQmkk0a/ks16OPh3RD/gAEfe\nK9PSWSWoHxxufLPE1tznQo4KHn/XPJOD/B/TELK6x/hwj9QfpTGLAIy11l7w\nh5OdaW3WVG2QCMunBnsV+6eSc78tvll+6YEXwOSNwep1JrfFcz9s5m1WGjV3\nkw1FiLUyf5QGV/FmJRj6Yj72yokrVmppqAZxV2T8A84JQrE4h7UOh7oNupA2\nmhMCsfUaq7//o8uqPAE/Ga7mw9Cxcjtq/yrWhXML9x2f9pjS/CItyNuCButY\nPjNEFCCNcIAkbBGEDvND/75RZp2HE5GCt4GP/SsXvDxNcJSnWI6ySdqXHLqt\nC+P3DSvkQJHHoe0SOjd4+quAvROwoSpCjxTPzegRGJmqmp9rdt0RNc93nYcA\nfsn3KRY9SQ3Dvrd0wOH5cM42wVXijpUIAhVHBkGE1NWoeCVi0baY1jfXjMSM\nSxRG\r\n=QWpE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDoDA81+Xd9OgpFh96wL2LPw3ZlHpT6ztKm28CxdtFciAiAdaVF+XsNxkgcrLD5kBBznoeqc5Ielw1cM5Du8SzIc4A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.e6c1038d.0_1598557039182_0.9203503740002936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.34012082.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-ripple":"0.19.0-canary.34012082.0","@material/switch":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.238216fc4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Psfl2NhGOFyTYRmpNqlVhhAKB3r1EryHgoqUg5YTs3mP4ec6pmfVUiVStuCZLBsDO3y6WFf6UsegOdSFYEMZOA==","shasum":"aff4d528a763d4b7c8b60800db0938b98d0e808e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.34012082.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4VCRA9TVsSAnZWagAAhNgP/Awd63lSCwfJ433NRiiH\nxWUSeQdNfO/PwxjroKMsOGtCBCV5xXGvMx79EfmpFmDhRc+f6jopydO1X+bz\neFA1QcYYT5HHm28Q0/VwkmTUNdrOQoFgjZk6vA9naoSCIucsnvC0Wkw0mSer\nEoTdwyXnyQXA3TdWpbAsXAQWOa3lDxPsz3xtVH/A5/mObSOqevCBwfq9+1zH\n4EAUW6w0aHBDSy7KSgyRySiTMEYqhavBEfrJZvXT2je3QShJkx6Ze1QTXdQO\nch08xHw9YAWTmlmopuN96uyqRwnqKFezBZpQ6VfBDgxYGn/lzmOisrq3oS7Y\nWOGnDZJstM8fdD1BTnFb+I933ojOdZc+qnzFqdWoqa04Axq5vgw55oCZN5O8\nD5eEDdweTQ4t6z2ur+6t0yNienGJpVJFlYNUTnL7dEj4NqBZa1qmIsuzXnzG\nKnkgf6+WF6i3n8J7S0L1s7ufpnZSt6gx/HGj47EsK7Quzrkjc1M83yLwXuNR\n8s/VQtRLKsspEHJG9v5IeSwnfpUyQb0AyqDxUMjLwW8D5E4EljflwfxqE4Qm\nJ0md4P9VSqjy/tc+2V8kMKMhBNDtviBJyP1QDuEQm5ZpgwxxGLlcChk9ce0I\nXuwlcUzyugb+EUnzciimeMCQblK4yy17Z0vREj0pKofcd9Ks7mbaR78twMuT\n5o8U\r\n=fEA4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoug5IZO70eObfB/JalwaI0JckHm1xhmxQEKAtJWzhQwIhAOBgWZrHI2ugzyNbcanLmBGpGlsOKYQi/6THZv1HDNI0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.34012082.0_1598557716539_0.8131474525182236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.c073f7b8.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-ripple":"0.19.0-canary.c073f7b8.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gbjTjj5k2a6Yc46cDAUWARGkEtqNd5S0QsNVritA7TrqnOQChnnAOY7ZKuzHNV0tbGsoApKSt7SdYK4jR3SftA==","shasum":"108c1c569636bcc08fb87db2af1430ae5216e22c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.c073f7b8.0.tgz","fileCount":16,"unpackedSize":52642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTr4CRA9TVsSAnZWagAAMqAP/ia7TOcyuedNQxxUTGwR\nFNmRgobSU4J4LnMJXsCG4O6/PSLyiffxMIBe1uRBL53KpVSDLBZ8d6qEt2PN\nxa0YxhRMfk7FiNaQsCWaRAuLbFw+Uc0eCcp6x5avegtuQz+h7vsS3gIyUo2e\nuQ+Bn0cCxkEhC3xE2YC7EWlF+bGsYGdErogBGjOidGDZiqBIhK3m+K05V97t\n/8/WAoSrrRE6Zm7CbCCSexEcNdHcNEq3ncWZCCMXXhg+IygOzA7QKaWCn5/8\n234C58zLATm2HHsHQt1muxKeec1uXBJ3dfpcmGQZJRUGqqY3lDnsTM3k3rYs\nfdGvPOPIb9mS/1xihb9I/H5swVj6hyWnwGlVqFqMtcgJQOxAE2aST7WE4hfB\nO/4uJuZ7aaN9b0T39n9jcsJNnvxomev3UP8daqQqemjXe1HRrHAibl8JZVh2\ndXvDQuyp/J3FHKWPKqavM0OnsgompzroPVH145wWxMZ8CtBghVR4Xa02egf7\nyE8Y6TjiqyJO0C/eDPniAVwLD+eAaUH9nkAlEYwsrbnNFEq2qDK9Fca5GA9k\n/bO7+xtukfsD+PYuqtV6ghYwrBiYmgpWzBi64W9WbPVuPTzIXiDtoP5XwoXL\nBUsilaREIA1Poj848Dn6J2meR4wbKMdlHGPrQn6ysckiZ1Mru7NU5X3YidWt\nMzgI\r\n=xt6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpdrfRULHTfYLyJUgKpXs9m/Bgjme7mGlyYjQhbmCZBwIhAP/5sycswNhKHCr72ZoQrkddgUEshroYthuCJrKKcBMa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.c073f7b8.0_1598634743933_0.690131100452011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-ripple":"0.19.0-canary.b7ae68ff.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-axcmG5auJcbU+/u0q9UrwsmfSwgK0Rt80PNa670UYBPYSI41yDN4qQxha4cRzFg8BbrISFfQTf8wHHZYf9e8xQ==","shasum":"de566ee5260a61f06661faa42803d7f0976b8b78","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":43399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa74CRA9TVsSAnZWagAAoagP/3EKIos2lG7HI8tEwUY6\n6D9lI8hoWtrQHsm0xLzXLlKFGmvCPcF8a8j3+jx/CTcsmSZvkr4x/xFALcVf\namU/QEfFawJ3fBGt5eAuJs60AiIgFpuN8pAhEVF5igTzJwD/UwjKcfcmWm/R\nSDBR5AtlT+jjK0ReVeqPcL6qx5pooEH6GWYqLOVjxLTzhxaY0jihq4s3a2+Z\nUMoXmx72EDkdYIOmeFMJIjb/ps+jHQGQ7ZEHvZSOEjqvo1hRQHBSsyPbIbys\nFkYS6ni203shz59p5SoLCH5zowm1Unm9Ha9SlQ4uDzeCguKIHJLAOUx4JqQ1\n+u2DcMhlE7ii15bgWGKqebQpPiD3AEM6hvaO2u+iM+m4m8oBPhvFaU3oV92V\noGiG1zzM2r5tXTYxSx4Cd8Yq3bvNopLxP6XR6piJzovQqKdUB5Qyl371mgnT\nUT3QYCRbGfeI+1Rt5SIbbQYX71FYRIdISFxtXxRE1Puc0XbZX6og6MrvEVv6\nwKE8d7XGdxkVf5AxCZeo8mwi6w1uLNjZYwrx+MOr/MCNg4c0A1UcEgp1Q2Nl\nWfTyruCwl0t+eXn8hdO77PREIxxncKpRSQ3gETnIWuySx4joRaXW6bIlY1Sx\n3hjSO9Ww81Oxr7N9BzXebE2v3bGX7SfbxqddZrSLNF07SaR4iD3sSGwaBNqS\nTw0I\r\n=XrRD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBV4kFZHmpLXpvb3kAE2qgloywS2biFpxQtOIZ/KVTagAiB1QxpWxUog+c6WhPjvd/O+1Mk3jjhtFmhXRfOK2B33nA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.b7ae68ff.0_1598664439983_0.962352999613409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.697e3879.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-ripple":"0.19.0-canary.697e3879.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0AGT4lXzoEursyyT5g0jg2rA9Nk1ee4Dd8DQy9zNHJfEwMl6L9IRupbm9v5hDg7EwVh1ehiVzt1xlrzZa+D/WQ==","shasum":"b3ca83dbb69745b52a19e4fdf5ea4b1e30c8b3ad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":43399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOqCRA9TVsSAnZWagAA82IP/igR15BmIrWmBkceGTRa\nBRgW7TUrz1VOJyACGm8RG0ci+GqeRhAfdRpAIMVAnQpTi2sV5M0rO1wjW2Er\npeNvONmMOAH2oSKIE3nv1j83aOYzRlL1eARt/vPnOtZKlHzIJ75963uJoRgs\no20Q34FK7hE2/KQ5YLSTE3oJptAQZZ4vjhXz6utmbogKYS8wjxCEDYA/XNQU\niR63BR/b9woVDxSXxcQhq7lQSIcqslFGdeKwcVZK6Q8kRwYT+OYdJJEl4FRS\nhFCP13N6BeeIuX4bnrO1UVbSsdwPa9n9ZzszFGXFhkiT85ALvJVEYfuRzT8H\ns3GKrMwyJ89kwv8opWjzon3f2BspLitvp6BCmVcIcTfOdRCHXEJr10Jt87xP\niZje3rtQJOYRpUPLndgP229ZKNP+l9suMzTc4KjZAW0c7w9+YEMv/aWEYOnm\nXj6HPBwdH2DnuTn1pMJLAl3GEuIJmrNV7I6CKhOi/+iTk+uBPKIXGPobhrWW\nQF8YOmDtN4CZCvPEEysFCgUagusiuwxZFnWfpo+scM5fgFl42fNeLJ90dcol\nfp4VHkqWnwrAqv2VrRCE4ZCZDcZDXFruHLre895JTHdvvq9xD/9FWOXwhkAZ\nnVyqo42ZiJXWhbnnYKXbZdaYDwEO48rjoDKweqNJweFYFY4Uo1JcKurUoRUE\nIs9k\r\n=NSiI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIGHlA+dn5He/kBUYsd9KxozRki2psdih10PbH3z+gEAiB79XcJK6DJc7fdZbYVC/LR5WkI//cio6sjFErFd21QvA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.697e3879.0_1599005610272_0.41418266262709014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.eafb7991.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-ripple":"0.19.0-canary.eafb7991.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------- | -------------------------------------- | ---\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/color_ffffff.png) `#ffffff` | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/color_000000.png) `#000000` | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/switch/images/color_018786.png) `#018786` | Fill color of the thumb head and 38% fill color of the track when checked.\n\nAlso inherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YgTEDe+WHYIq6CjSN9Yx87u2V+b3dagBIuRpEOamHeTj9pAZvO4VyS74gGIOmooCNOz+OGr7BkbWVcwY4SMpIA==","shasum":"70cf9b7b723940616ad731f9b00cf54adf0f8729","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":43399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwD5CRA9TVsSAnZWagAA2ZQP/0Fs60CbX7D68kvBwm4p\nBWO0/TsVYPWacC4YwR6tvOIwA9L6cp5dIqyzRsFvLHi9l1nW3PZ9Kfm0YrfO\n83cPbyJOJfave/cFQE3Wwhci/nvPGmwTeKnGhs0ocjytajQ37am2kdAzPEO+\nFo52/LyFE0MwqNZrCcmRdDynSDKwgjQo65aZsOLBspNvzbq6rUeLYE9fXEKQ\n/+Ge+vj6FU6KxmdOw6GIElyT4M8Ah4wN5haOj1XYGMYCwYCuhmP3w+NS91r0\nLSZ/jO0NAeIxgnCS3og7amtBLWTbO0Q+d6SJvFtUw9+IInaDyl/vp2On38hz\nCMcWuyR4+lu2rovRWF47Mf5A+LX0CdfNeCG+3GiUKcVRUryhBmHYoYzfEnJy\n4nGXckhwTQxihi4/qkh7BbHhjdIx+bpZfyZeexo5//y9ivdJzVrc+Yl36XrI\nFIrNPXNJTCulMq7YpEvXP0TLKOzqSw4a59vZhG5XQKrm69vfr3bXqwjkHhtS\nVWXaxjJXtsrQSUrqQLLrkHKbxD84UP3rkPvBQ/JVn9441muyVhjBLgwK5Yd6\nSrx8Kjtk++h+mx6Qh22hwTBCbTFNIgMdDAns+f2/ZhJeMarUJfMXbTKPNPnR\n0R6P74azTqQA3HIg5KtpzytaUXv9VxBGlzf12rdDlg3/X/7qwR0iCH4ZQlpI\nF/2F\r\n=O0TZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuBoxelr1trXcIIIcjLQ8xMV6Y7+7GBy9LI1Ywm/CDdAiAE5KfaDSW55/okjc8/ToC5obJ5z7ExU7r/kMPtIxsFTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.eafb7991.0_1599013112674_0.20089740597655625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.606642ec.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-ripple":"0.19.0-canary.606642ec.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bfFDUll8oWbqq+sa+IOGGgQWRw1d/luMzzhKapd2xFHeRCTXlDS4wrZcvB6SrYI2c7gWuszGopjGXWv695ey/g==","shasum":"9719883e1d98ccf024e000ee7fddd88026b4821b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBA4CRA9TVsSAnZWagAAkXMQAJv59VPtLhhPQmUzSS1d\n/a75Or0V/dNRScJQPRdRvF/27y3mYzebps3fo/TI/7jFi2LJj1RK1MX1sCpX\nEwv+QpFB6Yslh4eJs3FbDxCB2ESkHzi4p0WyfCvFW9GB1vnrp3hD8KItdfUT\nx37JtM6N3G6GDSM1dOXMizF3Sjbe6UExvA8RM27u1bxH+7fJQa/frNNeGDRw\nAIpA3Gmrd9VL4rL9OqHLo6LQIYsdMLCXVka+3ZO471V9tl2Cc9XncPOqyPaJ\n0guI2nF4qEdTqVg18BTFVAngLddRCJ/8fXEAG25ET65jAzVuQc8RTeErOt6E\nUAdntMhYm/vfET6lILzbMh8mSkBaCiEpcOTkiJoh//MaFHJjH8e47Gtd+dYn\nMv4sNK6K/Jh6OQ7REEPzPjI9GaHFzERzRTwGmCgNY3hcXuKfPE+l3gSDndhc\nOumeMvBz8eSWjggqByjV93DPs9Pb7pJngL0ITHHbmjcIUNCneVq/v14vwKdn\nzO3ZfKNlMAYS4cO/WAXsKCnK4rFOwQsr55KYX9mIC4m7dgMGVKCJQhiIznPA\nVZsaIb/XrQw6sr3tu3z8M4A4rHllUDhyUKjVA0vxpFI8Cpu13iP/XXaR+21F\nzRIINEKXoXhszPkHUSwOX4VtQxgRd1uUu97QZlZIdCZIK4HV0NlSZ2pZFfPE\nqqG9\r\n=W2Lf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlKzGz3S9lU8fVWHNnLU1dyNb3yYWMrFRzfJc+In63mAIhAPMxTeC2eoywuFZt1mxeEtKFsGvHfbMk5XXPQv7xHIEs"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.606642ec.0_1599082552363_0.5892340039670676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.ddf05c42.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-ripple":"0.19.0-canary.ddf05c42.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zWnqb30v8suhMIh+pBokxskz209oDwwYGduyUw1l8jEjxnuSF8uVvfZUF7PAvGmYZLygOFPv7wfYx60P20TcVw==","shasum":"505434a02772da7cd41994f0f6d9f1fe899cd256","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVQCRA9TVsSAnZWagAAD78P/i9gnPM71I6AfzwLnOV3\nmhhPR1M0LUinzg8huyXtZNIauUZOhxKlHehs7bWQW5Gn7tS0fW8uP+4OLnJT\n1H5lur8DZXT6/KKfab61GqSCufXK0fo8+4OdXPJTNuOKZlLe5ML6BQQHMnvN\nJNKzt5ZPtkwcobdeZp8pZWxU/gwkybHt7n9VK0LCgtwkKtkSdREmyjbnstcM\naxmVpNbV1gTGWvhhoYdbwZLER3P5Xn2mo59ETa4GtGsJpfREzUHqDat8qZ0L\n7bZunupz7rdrG1iVP9KoQ9I/tD2m3ImQFt6QJ0z75lAhXc9U1VNi7zT/gEmm\nzvu8OTG8aIPUwnjpJH/j74YkvjjUOLODYI92WvFZC0AGxt3My2D8pq+N9brl\n3PzhRKqvGUMzSXtuIx4ZlC9A5M87gPP6obLEySuhXP1W5r4EZTseZ6DjuQU+\nAYG0v43itVqqIav97MQKvwl6MMTsX4JHUel3l2hhKyZklsjnJdzeFYKDSZmm\nkiIufCWQhFh1X0mnGu74O7d6PwmQlnfRaMK9yRpEM/xDPWQ9i86H74Z9T/0t\nOSDMZGiLqOrQXWJg+DMDL/CY5RpUvmxFKHhjMGlj+MrEFH4dV2tDmV9Rc+Nl\nTnhSBgB3x8yUNbVdBR3crpH/uQgd5ZjySD27mc0SIS1a30PQc1plZt8mn+E9\nUWtJ\r\n=EkI1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGNOfdJm8AnmaODBKIyg6yWm3E0ihUZZtcW6K0NZnH91AiEAj7DbpoKtvHkJ1BkKA3SZexUMHDfv0SLDlEBEaEcj1Ts="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.ddf05c42.0_1599141200513_0.9269923731672056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.b889e6dc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-ripple":"0.19.0-canary.b889e6dc.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7KPOM3W9CjV04Kwf67bEezRQinvfxaRn68AP4W4cNRrpr09C/8dgaWVXhog1dr9k8P/hwJU/1Zq1sHAS0Tq4nQ==","shasum":"6904dacc76165ce3469a0e59b8fdb581f37392db","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmUCRA9TVsSAnZWagAAAhMP/1vRcMo2j+YZHymV2/y2\nguoHaQq7341sV9e8hKTGQ5JafuHHJriCbctwK6UnsEtVJKSzvPCTj1kw9+x4\nBMXBZTj6S9GmeVUSMp00fvgxvZuVzjB/NwQB0L2EjgXBr9umQ4BkZmcStpqz\nAIRDa/4GMe7emOoLM2ZatSObQHC4ILfG0ZqMl8KQwjr7EaoURRVyzDGUoFBj\nTSarrblSGFBgOo/XbDLEgEpph4YUt+wnZ41I3POe1UaD/YBDNFJgLo2CWPKz\nmKb8cy1ulo7JHZgzjOBSAjmLKFpBc9HCsNjqN4scsyaPwWXJataFNFYHYf9E\n/+i3he9RLJMB8IZZ6QCXxKrq3J8lvbk4eCAEi4buuACv2+AsQRZJWTOd4zYN\nTRPTUK6cFF7QGwTr34rZcVp0X8aYfi+fcDXahL8NGAOVjY3QRwYOxC1Bg0AO\nudir9tkRJ6L3PJrtiBz5TVhurRDBlfJCFrYt/ARk6LJmeLWTVrJclsfl4YXt\nb3MLHvpUNg4tJN2roY4M0ubQOJitGRaiNIDA8FCqYqvgdRaXW2cwUkB0g9Qu\nGdkE9Ec+1EohaOW6b4IcBhCx48lYn6G4go7pF4HSRPKUKEVKKLnMqWt2qf1O\nfT7v8WvqsgqT8zwRdmVAb0swBv3Kwj9eIVEHQB4V2LfSeBvz+cQkNpQV1YBo\n0PyW\r\n=FyRI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAY39AJfJxOzvm3IUxbyNG5ItLklTHVRcVDSBccZY3r5AiEA931XBtwArnvGEZfPbaX0axD9wOsum4jyemPB6gMxiHM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.b889e6dc.0_1599142291854_0.5826884246700261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.aabeceb0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-ripple":"0.19.0-canary.aabeceb0.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aKZH+MVURmNbsmde/NOEy5iBUrVTE/TPfe4Kop10+ZvyWbKuTVBTXL+W3Z9t45pDW538TLilQKUO3daza3xN3g==","shasum":"49e998244c6c38130f57a65e2a8de09c1fd8b0f9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUq/CRA9TVsSAnZWagAAEicP/RSdM8F84h7XkLnbTwlc\nN1zwgFOM1dcfYRNhlKcR8EvgCB6zLNGj26RlcOt6xOrX3+Sg5jipFA8m3i29\nKgwZ1lZmZoCM3PSOmlfwrUZdxSSm02ajvlNLFjpPhK1tNT4sViRCYCZOzB3i\nidU/Aed2X9hk15QJqEGlsZzOiEUVmT2rsTcT93mtoKCKSUa0qgTfxxCMGUgw\n7/YfKpPuuzNRRGPtMXYHVpg9eVlcBeJ/G9mRb22XCgDn61Fd0rChJarJEgwN\nja2Zs4rBuG2y//KZ3zLXeC+nMr/rUm7B+koYR3rntoUPEeWDNeJIl0tO47Ld\nDkhp5jtu51sEKg+ZuP6uTtZ3LIByRNieaZ0FjOtatkRYsWLyNI0phyXDQ2I6\ndzfNBf5P+ZLeASR2Aa84v18Rndf0YgiXotEYyxHDtkHGUU1OtG923ypq3Y5k\njKWK59ivFDkcdb6IQCHaR/FzwBIGUf6mrWKNu0TfLNMEfEtOEkF4U7kpmsqK\nlPgBEDJC8t7CAsbekxEsh6bYZPo16Fiwx0NtVE6eK38AAPpzxNNZvAZ746D7\n3QLs4Vp9fmdQkRQGf5OeE1F+7ebrI2mLn02zCAuDpHgoQv7CJeQACHQXoCIZ\nzimWLDqtQ+Ec+6kqLjcmggCSl/a2+redI5hV5ecxxmkGt9vpKorHnQ1+rNsG\nJQnf\r\n=2/I1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC73zAIEz5o9BqPFWVzFMh2KgWG7oqHQe82yflBNfOtgIgZck9uCwPVC82P2B3qc3LFpYzj3RyGMZVeGFyipZ0I3A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.aabeceb0.0_1599163071149_0.9172602068528717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-ripple":"0.19.0-canary.d8cca3a6.0","@material/switch":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Aq8AGcxQKEeWQgcm/p3l9637H27uvEHrM4FBC0kOtw3usZla78jgsNlL1nkFFhF1zQ2QbFu3LMxv+lK5krdMKw==","shasum":"5330d70cd6ff957a46372ea35e9f3cb8a7e8e220","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDFCRA9TVsSAnZWagAAsusP/3ZD//qIeWYgWsBEwN+V\n4S9ehpB6Ta22L6js68te3SNeg9qvfbox6hfA5xRTTK+PCFzWkqeQJL3v1noQ\nvb8qGyF8eORuTXbeMsts76ZkCvIrUfE3nudUi7mZXH4EBRSlXIo+sa0W56cM\noVlA2C4mcx1COUPjZCWsAXWWAzhhFDLKQvAYnsIcbQMsVuLUuUUChWKiHSoa\nefXrcXrksM6DHfk/iAvUbgGYg6n4e0NHVyLXa5/7MB9YYHBrUYeZ03uYcp7B\n373qd6qedKwEKj8a9XpFsScT1mHvOR4/pLohp+0bGrkmf0OaBKfTdQ9s0C4d\n1N5wWp1KiOJsGmF2bt4nm0Z83/s0A2AXGuclAHNu3DKAb3m4xVM0oR2yMWc7\n9uOfbLzeqIPBBJu8XlnzKURbnfMRL6zM5MTtIw8Hac3c+l/S/sS20zChP/kP\nbI5r3MdSoa0F8xCtXFY0v1/AniXdbFk9kyjeRutC4l2CJyCXWcxT3tFCapIt\nb5NROyFfpa/xE/Vqi/T/l1vy5gpTOrutOUlF/YF+RL0rPdMwu2nMjoRFXAWe\n0Usty+e/LiIE+Dho3vWWy0J6DYAD3HlSaVIW+tUoTkw8oekJiFBwzK88hoPz\njBEG3wHnZHZG4NtTD1Ordg13mdAHiBOBdCijqFy1zEliLoP9PTfMmPXeBHuY\nI2nF\r\n=/Hs+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCutfNISrTHEqvEOWhTWFja2oSfbaHRYYfrpmAGT2Uu7AIgeOwHVNVP5IRGaShhutswOHpJDQmYmHtRL9DVrDP7WMM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.d8cca3a6.0_1599168708817_0.6969930355169016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.26d34b2e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-ripple":"0.19.0-canary.26d34b2e.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2vQyEssAa2BFFHIs5JPruJ7WqpWaQUI1yXgbRyV+wANS0qcT8BGLwn0OgBiWQP3YAjzkusbRPY96iGR6mXE9EA==","shasum":"c07b603a1e40bbf7912abc698ebf6e65d978f45a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWawCRA9TVsSAnZWagAANr0P/0WioLR7kyj6HkOeQD1c\nPUezUNy5QD+oEeLgkTBD0XgpxnpkVH0uVirgORX9pycXMhuaMZY9z5OBB8YJ\nbozyj3fdLVRdL/I0P9KL1Z4eDRwBhG3f6rTQo/xoZZB94TOMJIcjKWC8dJe+\nAL4K3tmEWYWBp/5LOosLnv38datgTa4bCeCqvPUjbXowJ80GysSvdFAqxSaI\nZsQMK9nACMlhRSY7SZP3c6qGKmmkGzQiMoZCUCERJsKq0EasRKYhRHZiPBaZ\nTPVDk9Yz6Xh0nUBqwBIy152D+iw/dYCOnX4ekmu04ll/k7BNKMCCV8mC/RdZ\njouBl+1dNdVm1sASMVCSlyW+TTRNl408popGhpJXfOgaOlqmkeQnGdmYBlXF\nw9hll7AxGWuiRo1StaaYbgPREwd97ftbAkXTukjSVjyvzNLlJqR9mAAusXH1\nrmz50JAz483Tp/YIQeb6d9lEe8/igLLVbzrh4nGRm2JZ4qnCYHAUw9zPnfjK\nMCVoAU1R4pSrOGLbSz3cUwafGMdI27cWNybW/aLesSmWkpnM+UVtfw/qO97R\nS8o4AGxJYjtxPv7zYcKZG+jGo42bwEk5UkGsTcHtTRhqntpEjlJcVxGONfZq\nJFLpZ1e+zVIryRPhfPtB+2F06IXyIk2XA53lfwxC5hIZLqYt3eMU3+qBOHfB\n/YMK\r\n=wlJo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTtp3fbtjtAjmRyE8j4L7WBEfO6VUjgXjuftP5+IJPyAiA8HmpwI8DPfqKRIepIYEh64WZLLHhJXN2QPPAaF/NebQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.26d34b2e.0_1599170224427_0.39075458749252334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.a1c44494.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-ripple":"0.19.0-canary.a1c44494.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-owsN4a90MsAi6x9ZsTGkIyV5fds3fR1ZlR5aXmSd6i9clu9WtOxQGTBfYyEKo+GkNJ5YOO1ACnfKd+rEq7d+Iw==","shasum":"5b0ffdcced9405f45f53acb2c4da94e67a26b3bc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVI0CRA9TVsSAnZWagAAF/cP/1mZE74VBCJY3k6NG3KR\nYSTnZ21z67cT0iqQMo+/djtt1f2Kx/BGL/5bBpMv/tSm2j8m55lNSu9yoamv\nlr9F6NXq1XHnPXoTtyWE44rBZALRsSnYzdvfZ5uPVecCCFkNvEV/fY1ujwZL\n5AyrPfUl+XtXgnBTBLYNHmXBorZUVrzxUrqi2uXKwVCZxg1Ue6erEBfIgDww\n4X34/GChg3Ga78VlNgLD7WRqwKoVF4ZARm6n1a3ur1uTgd5ZjM8MSdxr3jQJ\nQ2LH9Nw5jGO6JOg+6qyiz/IHAhzCdnb/8OpeZpD3iMuiTH1dfGbnr1ky45Ba\nAcaAiPwfAAu21Yg9WrSGOUkf+/2kvIrFKh0H08gwbz71mlG8b5SUYmUvEBm8\nAGQDVxDXhgmFgtPeCpoJMnkYPc/20y3Vc05niu+yXS6BygRVk2NV34WrQbDl\nziZ2g055X86qTZsL3zYi9GOQGdM8E3YjCu2VhCOLJ1pNbk3t1iQG/Vw7lpZT\nvkYI1Pe337nytCdqhEvLwfLbG3n+19j+PTbkw0LYlUIhh6wrFAflXTiwhpGz\nzG0k2NK55s1sCWBRuv85RbPadqJj+ZY+PcSG6CDh76IZmyielVDZpcUVfRTP\nyglB6xmBgs8gLfZpnyS3+qqB/MGQU8yiTHV/zYP5SGcm3ospkxsHrhzrrucL\nWqbZ\r\n=aK0q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvZB9NEeFfjapFSNrOGa9k5mQcZYjxNUzstewFzH0hYgIhAKhwod+FLEezkhoZ04SZ/SLkHQ0cX/TyAeC1uAqHm8R5"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.a1c44494.0_1599689268351_0.8525498364635771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-ripple":"0.19.0-canary.be1cd1e9.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CO+58lFVmvx414MGfnzMdWYPaFYiyxD1CxbjNU1b+oRm3nHbBK4P8VvB4ZHsORn4ISvHJSrkwwee+sC6rsI2zw==","shasum":"9dc2b33d34568221c3539cd388714d6946197191","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcxCRA9TVsSAnZWagAA0O0P/1ct9bhKBmYULSQ/Xast\nd7l/fHtPXICjxabp9C7iEfpVx0bT/mxrOl0wD5PBk2WnHO1Z+vRW29mvDH4j\nZj2cmVV8u7p2vnnUnL9qP2/18bhiRbAHwqXcvD/zSUCgeo0ZARrqiQrDHf5K\n9uqvCV+gsR/+5c0tTQJitQ3h+rbYGjQHGvJa7JuFB1QP9BniI6/b53CEoQ5r\nBEyDqCWVxcAylduQA/KP3nQQQISmndh46DxTwpbTGz/w+ydVYliEO4yNBbWQ\no7OPZSdA3He3IdATOTD7kTtyEtCMx1ZY9ApepXy9sa6WCOBX6dCqlKtIlzL8\nTGeSAmviKXkUAg4vfZgR8DUtkTcKl2NqZnkVNvUjjwoluUY0/A/NUNYeVveS\n6eYNilR7V1dSXsamVvWi8QEL8uAcKMMYC2RvWZ0aUWB2/DmWPX5qr1rVl5H+\n8WA/gI7od641TuX6x8ucNvuSf916O3L9PwN164I6B/1UscV4uYJmX8LBmVny\nS/cKyi5eQMlfFOgf5+afIUKtJpBfSJ0rxZJWuT+yWaejU35L1DwuL5aPrMRu\nGEj3R0TOGQbj7DP39CU4uqYfZPomUiDcq4RyfTB5V1pbr4Go0KRniEynmSPV\n/sGYiKW9SW4MG9haNO6kVHfUAyhMzixZQWgz0X8hdIwIq+FFX+IVn28/SBu6\nCSba\r\n=9WUY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeCrjNbb9H9enq/FBNDmXRGwkKvGIsPU5WEpv0z4SoBAIhAI+PLwA7eO0Q8PcLedfoF+ozQydr+aYzUKYXV+HDtKVF"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.be1cd1e9.0_1599756081421_0.5165480064917205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.f094c0ce.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-ripple":"0.19.0-canary.f094c0ce.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Aua6SLXv2mB+mHXD21Seja8meBz1qhUE93qBAhXJqYGm1IKgBj6egUsbBe4zflL3BH5MoOTUTHwN+bP8vPBl6w==","shasum":"a73c2a4e4eb986e753d05a8fb05b40dbb6380ba7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQdCRA9TVsSAnZWagAA0g0P/0FExpz6Zo3/ou4Ms5+H\nqs0QBZDEuik4QCqesw7dc0Xd0nY4o53H+Sj+hIXZuKLP+wwY+ynY65HLSN68\n6x1P+86KKGN8ahqTAfGlnCvTjVQpM/u5DjXPGtp1REwi1oTeXfCiPYfs3cTE\nbioLwToppN8sr7l8F23NYGPYxPL8LaJjS1TjTn26PfpSPiQhyaeM7RK6jxsi\nDP4ZlgQP9tN/177cLAavE5N59skdkfCQblruJhOPoYY/yKX1LUaHYHTfT/Uy\nh0w1dTKebMm8qkk9lz4KxQG4OT4hin+nlK1qeMJvhrkVdTT/gpB41mu7lkyO\nWg0ezXgE0b3YgYcYtTpxuswViVMWmjBCyQ8qujgdoEbYSLLidLo4vm80DlNo\nBxlR+yA9cCzKUyNoF3H8MItbm3uKruBYFcTWQUSc4guGNhQshjTBFvt0UQt2\n8Jwf1W51Vqpr48lFv6PWK8nV5m6ZfSNq1CXMdLGWwnG9iVxqbdr94M6oCmyJ\np7vnz7h/VSkf8vukRRt+vxDsjZmcsUQVcDPM2DAXcLViXQmv4zCpTksCTn4n\nIlAdYFhdmC46dmOHH+kAODYjwU3wwkNFHxtpuYBI55v34GKh46rzKnDHzxsd\n8YKQHeWtUeONhbqITmgREYGitA7WQ0Rr4Rmva2efYDg7oHTWXnkFsHXBQpHu\n7aNe\r\n=ohUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9B8KyQo+LusNwrZWh1QHvsSlgRtaRH+gOmHu/ZkJFMQIhAO/yVCaIPHqlLF/QZTEEzl4h64iioOPtM4JQTcfhYfSa"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.f094c0ce.0_1599759389196_0.2382197365373162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.c1261e7d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-ripple":"0.19.0-canary.c1261e7d.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xgK4CUuRr/H6iOlTs8J0ZegOeX7EpycH8zy9qJbEJ1jhDPhC/U/WRH0LTW7WVWudM2DoVVC5l8rN4g8F8MvokQ==","shasum":"5834af4f936f82c9e96e73f54cd81d3281e1f15e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBaCRA9TVsSAnZWagAArfkP/ig0YJ1CKI/QZwKMM918\nunN5n41gQDXLBJ2RtWkcqFVKhq4ka4QiUPVmbC87JuxXg+Q8E0AU7B/rOLNB\nZ6hqFpDOYKzPOzu59nZFZ8z3i9eir2ngo8YYdqBr1jD3w4JLIXPt8s9dvVJt\nqrB7ox21mfcRASQ/7z7ZsuNkcD2kimaEvCSz5rHGjMMRGoLtIWoZXyHZb6y5\nz8pJRX1t1s3omJZzqGY1SiRGMULRXG5x7dQxiD2BcLNMTIv0P+FeUvBzAoVd\nEuH9fUEPof2XdVjHajCYccob12ALwH/Z9OxRFseAVQFLnfuOsC6SBPzy6UYP\n1ou0A2Xe4l0rLiISsSVtU8eJkD/mczI1lxgVMY9TqCr3AnF0S0HdVmdPqNNI\nd7afzqZ9iOWPajIYO/6uxdTLdSmNB5q26i3yOGzFKVCxDcZ742rMMny8MYY7\nSpeB1IReDakjbgC/gNQdTiOE82btJYJMkZr9ft0j0M5rpd3ZQyZ4MZyMLz4T\noHuh8SPKP0mu8OJ5Mnw9bn2GuWHPCfitxDm1h037pnssHUVv7fSu/JUx1HsZ\nIJatYDnx5ObCNDReWB/zIWyVsMYogj/wYJ+3X7VGyq6PQymWaHZcMbo2Oba1\nYY/oCDtiaMB0PLIy2dqd59z8Yipi2+h+/ZBp+6bZ/fCdxVNutqhqtlOBxBS/\ntb1g\r\n=hb+8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBxGw9lBWtQwee+ugi3SS08RzH9qcunWxefyWCL5XDWfAiEA+gLi5me6WEyX/+lRJ9upDbsrQ/M91MwE5laE0bwPQtc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.c1261e7d.0_1599791194271_0.29746641906708016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-ripple":"0.19.0-canary.9b39ed1e.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wNKvi72z2BxeKaLbC8dGf+l9sM8qUblPS4lpbtN3ECSSjO8cD6NPCWpsVVOnPLuu/k8E/EIP0+5SLx/2TVJuXw==","shasum":"f86067fd9390e130c5e5095425d9fe3b44146607","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":43082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCRCRA9TVsSAnZWagAAH5gP/iJp0+1/FBbQDKdwEr4y\nLW/zYHqMfjcQzLs7uoPT5qS3xhRH3kXkggpQzeGQzwnftSBw/rRTIcSPbsSs\nGhuHnQ9SFAKEb82YjbbH4l9YOZzwgUs6ghPjeFuwhyz8B9ZPlh+FLLaPKIlZ\nfHamHbPzneEa69+neV8XY4bBzXP+F3Dz/4SHAxeKi6o1bBISe27Bhk6GiH7A\nz8Qz0g3jZ/ae0pQ1JgZljlTKPxmP4TEj+TIxrWZuCYAbolTwp7luKz+emvPi\nyftBPsDKAUVcD0DxlXrmFOBWzTVLdXovrWcyLGHf+7JO/hpKG7mkQUma38ao\nzu2M+nXCePIRQvmrzURAOpGPf54c8D73D4oTdd4PN/nsyridito9XKFRuEPa\nk91dWQWnVzeX7q0zPIRyPCcns871p0X4QdU3xRhMEZWLVILKxAjDBi+7XIb9\n6i2He0+uO9BTbHguqRn0CG8hG9tzWRb3tS863ywpMGXKporx5dck+3KxuFms\nUUJ4osLxMlyeeWbhmRp3SofKUII1LeIDA02Emqi7CqESlQTMuuVGD0nIokVu\n7e3PkhxYdTn1Crt9iJ5IUKlEkwzc7esZyExnoUjB4/1jrJAaAY5SBDTf8KZn\nJIJgRaEkF2ek4LEgM6ArVkOqvzUa8F5DCb/mai1lnlQhi25ff4aneY7qbXMd\ngQ07\r\n=vgT/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4a/YvslI3pOmdVF/OCOCFy16JyEz9bk0lJCD35ZLpFAiBHkB/vq7LSGqSTmfodvcaoQzBNz6C4+2n/bdfAw4sSJA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9b39ed1e.0_1599791248749_0.02904899672640382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.e67214b3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-ripple":"0.19.0-canary.e67214b3.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OVZN9Ms+27Urg5f91Ea52aKsoQRe7N4rbH3Y6MwsVq6M9jKRCoVnRA3DYw2J/AfrWkDMY42B/8jZp8F+5nCx0A==","shasum":"043e98f217af80c7363d29875579c2a1c459a67f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGTCRA9TVsSAnZWagAA8AcQAIsB7IjqXsPQce/3Rmgi\nRJBDDyVFj8Livyk/BKikgaP2g0m7ZlWra0x69kKxhNafeNN4q3Boe8Wq2JVb\naliwk5ggc6TT0526XpfB3pVvy9ZZgTzdlaemvWBKAOYNY3GRD1UDFDL+3pdl\nkqoBR9R2S+IjCDxCZN+mhtohzZcR2nv/H2sp5ZgDnYTaJ8bsgJZnxSk9l525\nKcQXxnsr92sASV7Gsmm+HqRkbszeLnMHTPyOsHUnHnBVh28BQWn+jSZUIAI2\njyf6FEETOc2cXwcs/5DozeFpOb18mTM3rzK8WvBXYc1p/+63VbuLUfOWMCuM\nX6O6mVuWDU6fZRu1Lh92+wFi4/S7PyTlJsrfsTP/aT0kdhgMWEXduZ61TPOr\nlM9MN+JVw3Bcmro3d+Yrz0wNwvp54vcirDaAU0tO/0GmgGO+kxoyQPIYwiBY\nnALFtmxz0V9POhbEpoXzSO6Jjmh4KIxQ9o4GeO2nRuXWZz+qU3198jnIPqQX\nFep7zUFBN22Y+MON+0wBiL179PyiDxib5YXmGsb2lYuvBpqRsQrJoKNIH5XH\nBXblQR+Pv06vScT4x0FZnqr0GhgoTnjC84cKUpUrqU3iZ+95BKHWk+kIEkNS\nivoCCk6M+XXMlgOvHqhy1NJjt67usAYvABeZJK7CyRID+y+esrTxHW0XsTeq\nmZzh\r\n=xXyq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFm7qMSUG5uZLracI7ZALV9idtP3dyXnCToex1/CLeHwIgA3Wh0Vs1yFCfLtT/yU6FY9Qsp8zwDb7Uqw/6k9iLeyQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.e67214b3.0_1599791507338_0.8917257815023296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.36f5da28.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-ripple":"0.19.0-canary.36f5da28.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rlype80M1/RNOAlWdO0gLahOEwXFx3KRZvjTLbGvHlau6D7NNZgrI86XzbxXuV4S44py2oZYXehNyF+QTN7y9A==","shasum":"d0a7455f14df4860216437c86cb8bada3b011f42","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuI0CRA9TVsSAnZWagAAm8sP+wQ/V1L0Bg/ev0YZ5ual\nLUgA9FTlXJVc1/2NMNoOVjje4C0+oEDzgIW2SnhW5X0oAjDo7Wf5w+VR6FJF\nGbF94DelaGlovlJcDQuTTC6pQKOJ7wk3JLgBsc5KjfbbjU3G2135muQMlM/j\n1fB5Rf1ZDfBIlbdKT24Li89Hn3N5vEUm+62ageOdQ6Hi7kFNaagNxMMyStMt\nwSChTWxjQST6YC3kDLfeOXdKd+fghp3IT6MCU80HTEmxNQVaEZFpyoWECxv+\nsP3VBJuIjcGL2tsEEj+onO0WCHGm9A4jnccwXgj1R4Q80Xrg0m6yl3IHKTF+\nZb+lKINEWSk9eo/mwICfRvFD6yqtMblZv8EruOxD1K3PwTWQYBYryrAn+tLL\njrvik0XbdQnYLJWrmpZwv9qas6r0ihiZGCFBcQSEeXwqRUaOYcZDnp19Hhf9\nYXSyaNPNiDcMgxIlhGvzfWpTeAI5B1Rz6bLftT+uinvnNctyoO7JazU6KQgX\nGyNm/atwatIMn14wV6Wh+sbl9HYLEt2W3ZTw8jUMlDx77mjAIGtKtcKqa8TM\nVa8pyKzwsOJwoiOElyDZ+bwISAj5jKc8aUT8OcWlxFfc42WDREmrL/RVOYE0\n4eHVHLkRA7rvBax5g/K0BYV3F67vhp3pLG1B3AQ7DLsuYov6/+gVjoIZrhZF\n8bi4\r\n=icvW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjOWT5CUN3LzaVJtyGBRA8jQYFu7aYPF+6fgfUKntRYAiBHm5d2IVQQl+9fYThuKBgLhEk7x2jxvYC/G0M2aFrPLA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.36f5da28.0_1599791668097_0.9856408894337758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.3babab12.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-ripple":"0.19.0-canary.3babab12.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ziIMKDPhxU5nKUZkfkDq+2GQivI8LCN5G0OkJ9ROor5cFbcf9TDaH0Twwac/URie55gP1CmXJFHhpfSXeozCyw==","shasum":"8131410b5194cd57a34f332134b1977746d9190e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLpCRA9TVsSAnZWagAABkAP/1vWRQhtr+2wKjNwI4yp\nehM9TW4BGOxiE/xST6OYDVAdvcL1Xp7jrdFQNkOcDE+cWMw9Zoxv+DVH1PCe\n9jD7w3aTKSzBIDH/jWoPbY7nMul9HC0Jp+42Pb29nIwFd2Pl2N1owM9KzfHP\nYtd9LQXb72dFnShTFvBAcbk2xTHr7MJ71uieJ6Dlt2KP7nc2BBr4rzg3elrc\nbME4Z8FOtAHjxYvrnVDybeWyI9mfu8bIfZrKmbYgh/qEhfRg8rGkoOatRmyB\nM+laRdkREt4aJbDxVWNlH+w9q7rZkG9qYOTSnmkJIeW4AONU8uTdczU1FIwl\nhzQK7WuMNuUozFlFQmdu8iIBXm7CTxObGFQy4+9JMhTF7IfPRrrhkD8eZEai\n9kbSRqlTHcKCSz6ywusvW/McBUTrPsoHxTyS1VuI5uAgb5jkvUgvFJiteEp1\n9wR6JLI43HFeAK3nKYoga5O0TL9NOrjT5RsvzOoLRQaacru307LDkNEeYRGV\nTdVIWaXDkH/nayVNX4kXG6IorM+s4SsRoW+rZAZCmInbMh98RNrhvZsj9mdl\nPWWNr0jrO5RWkxTLLa7IKOWtomuHXjgoVbl9J1nQr5reJBlLwIfb9pNUU/X6\nTEWtCAJmUw5mbb6RHKlWXhcuepsj6xS+GmEmuoScTU25HYDdzfdUWo2tTK/R\nH7It\r\n=wemP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA3i78zcg5DYdCZaXRhaRLaBQ8ISr+AFLLjbkpWWI2RgIgFL0FpxbMzupygQ/xb7MvLmMlG0OZRGhEkf5Q7XRjKa0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.3babab12.0_1599791849416_0.997942315415185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.a4481e6f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-ripple":"0.19.0-canary.a4481e6f.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eTWMKCntwmjRDy/nayztnoM6Sc8SjEYMBtpQT7qNcZmOF6ZXPsbgq/soGyDEfPdj2fLfCl+1l+wCzC4JED69zw==","shasum":"2dea623dc64ed1a3b011f3a5cea18e1b5e8b30f7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuW/CRA9TVsSAnZWagAAj8wP+QD5SejMLnu/cWOz0zvt\nsztK70VMlkb/R4W9FszPGXycjFjq+yYy7138aaf95ttS9D0GNasOZ+IEmODB\nWVFjB3fy/1FOxqf0DSlfDZMYf0oobY0C/rD7x7XODmAtAi9YJumg3aS6IB/e\ncFvgrMGk0BBFBb5TGAa5YL+jJFHyVP4EkTFw0l2nHUpMhfKqDFAQ3WeTRGxc\nDw2jessmXhpZI+ukjEZ4zCfLIBTiax0r8sbhXAW6b0cHAqd4nD9FPPIcihe3\nRhXTtoJupPvpSa6g4R3+/dtLshTUAnbPpPCm3ojhQviBvBeP/zpaXKgfVIEb\nC3UeHxUq2iX7WYmykh1EWD3L+cZOOP6lCHMIln9A4z4NkbgUHxjAO8cT0+6V\nN7igF//v0rsHU90cRRzDMX4ofJ9hwXMy/MEC9KMM7BvlHVH/kg39AoT/+TrJ\nNjSjhtqElzU9roCqGtYC6vVilgRkhRkL7bLhnLKFeB1QF4k9Sb+E5r/CTrcq\nhApzTT3Lo1wtlenfA3GazKYWciazDPe7nVf1j6Vn/hPymYqsKUdp6X2wZwez\nf8LKyKgbLAc7yT4q6eE27bWpU02B/KC/4zW18tZNkdTGV2vBcuX1JFOzL0F6\nhjso0dkMfh+Ev1LvML++AIYG3MCXKkwFxxFIVlDp6cyT5e1luIXNBOfzjzOD\n3fbw\r\n=SzjF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDixjMwDs72h3Y8pdYFk6JtuiSht8ERTmTiqHWTHcgoCwIhALJo90G6Yoe4ZnAvMJWd8GiuZq7i6pE4Y7G9LIy9TtL+"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.a4481e6f.0_1599792575049_0.20080871251239274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.a9177836.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-ripple":"0.19.0-canary.a9177836.0","@material/switch":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-woojSB0t00Ag+NP0PozkunA0G7QWhlSeHSDWAJSTkPOvrEzPVIX7z6oU5bLd3hkgW6c8NcUlaXmXNHyTU+9K4A==","shasum":"e5c6668509b9de5428c1d7d7e9c6efa31b497153","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7g/CRA9TVsSAnZWagAAVlYP/07noMWJyd2yw/ZYkhQu\nQAJjfq7q8mu3NwLObp9JczOOGR3wjEaAnMMewS67d+BlMHy1W4mYSbqZ5lUi\n4rEnNd/ONErkejmS2S8EBMP0h16mGNRi1Xkgdd8C7xlcB4fiphW+ydWnvoF+\ns7pf6MbeVcdwRtVkr+Yk5nkFO35swXJc43JSArHocNQ35pZVbsmFzh68iE8Q\nMiY7NLZbbs0+pxJErWjWic5iIGDOqILOaLiuJVU97EYkzVNwtU2cCbx07TeY\n2gS3CyY0AAAWGI3BDak7gkNc6wlOT71CX+nSCuYN39kT6ClmniKNqBPR4uGV\nCeah5PukrBeJgOzjEDebx/fxG/mpfyZrie42l9whE07falr9gmwM+uAZGqVk\nT1xNXXKyVY8L8+ekeNYY2lZsuq6CdtPMBdVN7ExUvdKPuklY5q6dw6C66EUS\nWNijlhDb/MtzMgBj/4OQGV4yJarrSmp31oIOWsizsWpd6lVBvqKj5rnVYwtM\nShPhKyBWiEeAMe6L+XJTDWYP7sKwJlPUNIsI/xqvbljC3TVQlR2pv2rMiIea\ndCzmLWHl1h1G/wBzWQNyMDaHhdkWZdAgDwGBzqNkl57d6UUBY7e9OBndlVPI\nf52rhmkldmbXzFRH4U65GU5ZKgRdjB9a1x3VceaUK/n2E/P2lQK7cZLOpYUe\nKy8M\r\n=niyb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU5qyOwr4CVQu1yEI1vrhMTPGFx9M2Q9VXWMaG7Eyk5AIhAIUpTsqQfR06oakhFPcCdo+1arUUDc8Mmg4po3erU3df"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.a9177836.0_1599846463279_0.4447646235292393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.b102a3c8.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-ripple":"0.19.0-canary.b102a3c8.0","@material/switch":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cPlltJ7jtBXPpt/C7jGN0ja4e5ZJo71ZthLHFWpnVBi5edhFV4tk8ncrmlGUnQT0IMEr04NE7BMtOHmjk/bueA==","shasum":"87379ecee533435fc7e1df68b16697ace55ed90d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87tCRA9TVsSAnZWagAAOT4QAJgWYomldsrO8E5Y19iR\nBYvl8/KM0bfH87olr5E88Ka1e7aIsoLbzeyQyoIyqyXglRLvedu5ECI45Lvu\n+zfj/832Acsd8XgBlSILa4VzDV0jqvlrHhcsLxIMaCYFyhc3QB32bq/TmB8U\nZ3haLOb2XeAR6kcZ+HIEBCeARMNoRQfIDEerJzI24B75dmuIYpMWzS4y6BZS\nLFmjLPqHkdToN5j4xd0NQjYq3A0AADGRf/jP41saB8g1KSEPUkhhsqBnCiKb\nqavp5vW78Vz8V+NIVyDNabfZTA78Wv2GoXmDF71CxFo3Abov+FCDSQ0BjA+J\n6f2qFDDzcefXGcxO+EusF4v8nSZgjeUWr9Uk9ueDVvm7M6gZKI831aHO0LP+\nPIF8jM5xwVjK6AjsOM8wGDw+3mJVN2V+5HES8SdE7VPqIVAhYZOA5UWFR8BS\nMrZt8IofKoak8I3/BNfxFJiFKKrdAFk54Hcy3AOkYLtX66rkTE6cPxMrg7oM\nNAoZU3Q5zEfQY5QXhBwsWqfuWwR6Ag/cB1SDFk2pjh3X8bvbIX9ZV6clrDCx\nSD4X4AyFclf5Cd8wR7ePk+Hv9SIzxoVp0UuVoYb0oQZcklMH5HGgL760KuqA\n3PlklQw0DR81OoACUenvVO1/IsXrHaVSUMX9gDCgwQ7V9Kk1uEKgEH0aYoNK\ngNge\r\n=9pBJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSJscQRyOzhmxQd02X/O6/Fk7rJsufWlBFst7V0uk+igIgeji24Ed1F9nUiyWZ54tFjjd1SSXm9iEb/X3PnWtuelU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.b102a3c8.0_1600114413479_0.4385505361302038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.a7fbc707.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-ripple":"0.19.0-canary.a7fbc707.0","@material/switch":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+BQeL0tgVJjwUypdm+DOlcw/5xbZ/PAk0cjsQoKm9kb8LVBfpjjM6Xyy7W9aLwO3tlkCT6n4kdSK9e2/1Rii8w==","shasum":"f65962727b09f46f198c647da9d872ceae5d5875","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZlCRA9TVsSAnZWagAAC0gQAJdHz2MfinplQqcCKe3k\nKIKXIDCpgqpNxiJnJ+gFpAa2hr1A3UdnpgMiLUJIa59WSLHjx8Krv3RXfQc3\nRTH96GAy9wT0Vfj0lC4lOYTKE3I6rSsVRjAN4N2ylohRB3G9axWC3H8mq/56\nWx3X2LA0U+oxgA9XvQ2Rxmz1EMVhTQJzX2DGX3YBpLDpCb/LqR7yF5y4pg8e\n25E4TGnUrOSwzeYDoZNbb4BN0vbbY+mRpnmdWmOizx3UbwzDKC3oAybo+zmk\nJHxohC9w29OofcqQRo8uDk1phK2IFPSLsOqDs/iAl0C8qBKALfklztLtSLQv\nhuLzik9z+enf5C6IkV/ESKYgVX2wFg30MxaZi1aqhStgGZJuuBRsqBIZ/+RA\nfgtUOKNDztKPJN087kCHOcSLWRH4SUcpoXwYdhLljGfeK/qcYuqhQxeXXNBA\njWlK6AF5rnwRcRQW1JtD3oUKLWzsjfN0cfhaiRgkgIZyU2n5r7YrnGJwOZpw\njDCvyheXT0tYf67S0fsYtcxqihfpjwe7M6Ma2Jn98R4BHljNT6AK4Q7TSfj3\n1MIvuv7v+/77zqBai6JkqdXijVbdsvF9mVJccnOzJfSCmv653lCxPELahWLU\n1FUBGLwkbjrce4o8yE9q92K3Qq7EJF/C48/nqdF1i+jIVTSw/ACGU6jkzJdn\ndP9T\r\n=wdvG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDK7QJdAyqNvggXdruz9LGc2qnwuWP15il8i85eJogqlAiEAw/N0wEhtgwnXGUPW3wbRALRmovJLEVFGagpSr5fUNag="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.a7fbc707.0_1600185957252_0.7621803674592813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.ed6b8660.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-ripple":"0.19.0-canary.ed6b8660.0","@material/switch":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yaJLDp/5O3bpQr4OMBJLeDAKPfl5b5UiZXNh7KE/AsswpO99MB3gcfz9ZIfh4ahFL1btEHewgI5fokmV0boTPQ==","shasum":"2a956c7d764c271538b70e369c4348aecce0d75a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjsCRA9TVsSAnZWagAAo6gP/3FykfkUIDkJWkOmAVRQ\nqQc/u4OoHJ77TRt+n0RSxakrqo5exCkdlOCYlzfOWOXYS3h5dDhXLOsHLHIV\n7kvRZp4qXs20501vTEPYjLA+Y3CrzoopUy17RvNFabqcEzmqhgkUN3r+Uku/\ngbr+toIAKCrE5vf847cumOcDEdU5bDfPNVOv70hPtSR3rK7jd+CSsNqo+hfz\nAhBuYHe8aQ74iamqUiQhLu8Af6ZFyOeoIh+Hv+wiLapaLvW79eaQlYNSaJSr\nedCIdaBcOoklgXXQrxgOqPmT9o6E15IFD26BI9twgsb6ViRgVDQhgmwLBTBY\nSt1zhHfRB1oTRXUZIyeVuUAfNY+XCEfOc6jV4/cJEQsyuGaVYx3JW2TfGccR\nf2C1Nz84o9XqfVC0ElPDMNgIz7eu8DrpgUut57CrL/7lpArpwFbW4dA86Hxu\nMhW/XLB7VMx2f2unpzZKUEVYzxwv56XVbo0824vFDy9NM7BJxyQvUn5kDeh2\njEt0FoznYPh1BLuMygG4dkAZHP67AeLkuBFm2Y6LkxrjVmhCB0s4c8Ylhs5A\n197QE5ReqYmab96vj8YkO3Ak1zZL2dBdZthOotlhtL2KMZ3XgybU55odPWiq\nk1N1An76yBGeS8koGunC3zhRTQRBtzZZvhltiS5erhV2DtVPPa18JmdqruQf\nWoTe\r\n=HfIZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7mKhDEWj+V8/9hdrEpqcg/6s9pPLKFOoVpe2Klf+X3AiEA9EvQJywBhPb58wHkLQf+dZHXUhSgvRroM7x8fR1qrZg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.ed6b8660.0_1600190700333_0.1636166171410609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9c2331f5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-ripple":"0.19.0-canary.9c2331f5.0","@material/switch":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hPLJjBEAsL1oCJloe4bT+sa+oJwBLQOOLStOdwZ5L6Sijq2XEiRFjABxdPBBYdw+mSzjrsr2hHtuGc/Nbt/Oow==","shasum":"bc8d4fe1ad3d6f1fa43d6b39a1315b9c937171b9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6wCRA9TVsSAnZWagAArM8P/R+85oD6bHhjGWlhtq4z\n+uWVcEDcElSyOOEBatjgPoGDXkUWCwKOzs09PhGIlnNmfSw3DqrQRCzDip70\nOrePvEsvpViUmvgSKviTaebuHzSLsjrUWDYkjDU6Ocb9YWygQm33PY8dIuIh\n8uyNftCBAi5iplKmgl6XrrE+KvK6IEzv4osiUqPUECXx6watGFa+KKL/4YaA\nEjBA3rw10uZp87O3NxM/xv4g2X03PA/Ec6DK4rL/1bE2sZBukypM8PZPVZnE\ne6YVeyAldcFcf6TR9IJ+1Qe9AcLp94tS6FPP1yC9/NoJQTV8tOSD1Dgzvno9\n6Mqo6/Zdy6h7yfxoXggwGiVghhEbOd+WvIa4Ikof2IBPWEF86KmRdIAHskPY\nd4n/Np5nIHPwC5rbpAmiB+qdzWpfPIwi3dqq7fh+vwJuZGduI6n327C78p1G\nWItJeYABI07rG17SzqXBz9JFa54EDkky1MAP4PNVBp/LUILEYt03DvWj+JVq\nfCd0LsYJwgCH0JfxYse4FSw1GeUJ/H3GgQsBXK9+vE9YsPVASHhS6i3L7nY2\nqX3LdBfDmN8ZrTc3/RFbNbjOy9c8EkV5eWrZbFPiiYB2xxTtwXw211XksV9M\nzs4ufuTzxdgOP1Xd+rgRgjhvgRlYIolgw9TH/MZhWMX4qewliWAWldtGFg66\nFY/p\r\n=/wbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCaA5lZyR+oBDkfKu7CScSeGL8uZY2EgaRIhA98+YeYQIgTWWUqFqhfhxaziws9avRxRJ4S24oucHAYbsGj6Rd56c="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9c2331f5.0_1600192175826_0.8519710218765713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.63a5f088.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-ripple":"0.19.0-canary.63a5f088.0","@material/switch":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a831d4799.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-U0FM3JoGcOv0NTyC1VgcAoMkCqh3JV3hBZMt3PJbPsghlKTytA1H8uwCAGeDdDzwhKpiSwUhVOSA93uuhBRkHg==","shasum":"be0e57cf6f578c8f20eb0c1f8d5ee5ccaebfbde6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXECRA9TVsSAnZWagAAWZAP/jyWeniirig2B3mlEggs\neF+NgtD1+DICJR4TjNu56IVUy1dleTg9KCw8ThaWxJ8Id2TKv/p/vLQBt61M\n9Z7VVkqWBK812pJrVTk4b8FR21/sJtPmuMAG7E28rMe71wwuLd89JVsLS7Fp\n5Pimowfe5rOanTRHwJ2scz0FNfnEBYAw+tm67bj59jlI1kA4fgaQYS1YymPU\na5MA1RTFLk8equwl4vC46CUcmuIm8ydI/6T5V5GJp1+Dv+/wz6FqR4yXO6kk\nP9x0XiH5YjtJpjH219CZrhF+zo8unbFlDZiBCiLrlv3aW6TCWf2xtA36HJyH\nNuQPKfXggjADWW7sUVvWKeAEOAWWvcX05OUJV+PlQKUl78laS0B+UBXmywDo\nA0xRTzfML51VDwMWJfiZjF5X/l0jk5TKOhi8sr96kw9IjpfwZ9TztIYwACK+\n74lRLp7Mt/Zvi7oq400L5b6MlIbBUu60JdB8zIqzgtGuzxJKFyCZa4zeeavY\n3vlllFQUe4NbB5Ei06tU2sZLINqKx6/W/ZVv1kdaS45EdbAx3Ph/YlKfPF/6\nIIEmkG5kWB8DfZQkefQs1FoaHPSt+tXFKzfGBkkeu9KloPVooM7CuleIC4Du\nMIxuxX8VnR1CtgtfEbtzJ0MagQozmqw/WTXw0mp9CdWvvkMdhP2JxA4kO1qy\nADVI\r\n=eQpA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpu5Vs5gEuWQLa8+WqOs6iM1uhKUj22zsZTG+3u83Y9AiEA3VvP+v1QRFz3MgWLXweURwGI6pMNfefjQ9yP8U9CKlA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.63a5f088.0_1600292291470_0.6662616827067105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.b7995e49.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-ripple":"0.19.0-canary.b7995e49.0","@material/switch":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a831d4799.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rmHd4O69tEiIOTDtNlLEIorhQBca4rDh6CQBvFxKGQLXV9wzqLe3amesneObnjE7MlN/3wH77XKTA6TjIuc4uQ==","shasum":"d0a22b738321edb2a607a75327f61698c78ad592","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp85CRA9TVsSAnZWagAAkLMQAJkDHhLAUl/06f5PPdTg\nEErXOJXxWMpx8IUFLrmJ0HKD0HjPEHViepVom7VBHyadaFW8sGLrcl/x2iBc\nZ8Da1kwu9Z80YSRcbpCLT4Utd5FaGNEhm0dn/79pfUobbaDxgL3DomNOB5J1\n4aAqVoJ07xR1eLGaPFYTPL33osp7U3m5wHxXa7YmgtV8H8rPh6SPSfqYlM/3\n/bvZCRaPIHKVR2XdMZCUJPHTnjVgwYjtloSVV+wQNXnJ63gYBtnsQDGF8A3a\nEb/UXJ0CY4AYjpiEswEjehuZOxVbQlBRUhqpo/sytOkFXIKTU0Q77IoXtF0e\nNugwtzpDj3nrZ4AbR8Jmzsmmqc0X6/cjLaVZN293cGJJ9IRYl7MTZnRA7F86\njDruDbb6B/oRtZhfoclTKwO76ZKx6fOc3uZWLuU80Bp9uu/T1TeKJJ8uKRC+\ncYoQeNe/FF1P5PZUMrouVLWJaQe2C0Pr4z57+EhFdEMgfqVPSq4oh2S75lDz\nl/aQQRbM1Wk1x1eSTiS6xBj0Sj2/tR5bPuanFaOFXxbulmGupKc+AgteUCAh\nA9aedjjaqBK0lf2TliQVDUuFs6UxoliL2FETMQMee7qwwe2N1LhcuNtOsd6u\n6l8EfFMJprM6PiPUI7PuNJgq0QmNTFA/rlE9hY8K+C6zAZJC30uN7fAGMGlP\nWYNu\r\n=jnBU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5k8Q68I+h4GnDSd5r0ku+whcjS2b0HwObCXr9vMrL5AIhAOvO1TikP1cOKDEu2OPR3w34FQxmXJp+Y8OvCyC13eDb"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.b7995e49.0_1600298808830_0.3828374073831864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.0da3ec97.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-ripple":"0.19.0-canary.0da3ec97.0","@material/switch":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a831d4799.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ynUL8XgvgsrlJuPKCAK+9s/VX4niwHnTPTtcjvWS39jEEJdTJfulOOaSboo8tkmut1pu28jaqMx7oBUkNxgtpg==","shasum":"c28925bbb087eb36af6bc38d6c6e31b69f8c6859","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRzCRA9TVsSAnZWagAAmtIP/1WcjVOWbRwqQ54/0tw1\nk99V6noZgIS4BUNCAnmm/y03yN+ez19HCtKnEkNQrrt5q24KuI3zgZHsFieG\ncTNBVHLH9vEhIc1z9LeWhchXuOEvkt1rgz+CuIIs/jnea8KsLc8+JZFx9hsZ\njGtN5hl169DYYjdK+xYm6qbEDS8lgLcpuEvXget3WEDOPqYyurwF694Et2SA\nMiTlvdWSOV3cB9cbbD0rDWJZQXKAmZpOKRAL1OsWGn2J93pSSRQQCqzYm+me\n4odlbQ7WaOSz43Xef89/nKagQVkRA69Gfhmyb3ZYn1kmseS4OQfIkLdbsw2x\nXTerCXHxQsB8ENo0jGS1Sfql5x1a5dcdBKIjsR3v79GtAM6EagJemNKehrQg\n6+BxtC4GplgpxoHHdJ7Mzz99ermDNZkDyrmVTSjVmtuXcWTv448visBpGxC+\nI3gTltt7VqWiqTN/kXROinoDMsYLvCeOTjZxnEdfUeBEB/6RDyLGXMgG0Q/1\nB3fo/NrYiypdfKVZGONqsiQz+nDMaG6mgxruGX3RVjlNvIN4yAfrJwwrhM+T\naItRnfYJDtjyMhvUmCWUAlErhjXK+jHofjPmrYqKQzvHrOj7otRrTARfv7OF\nkjLMmwLIs9R58SIRvZBL5OF4wnRp7/e1hT4QPuaX7a371Zi3ep/prHYmTia+\nlVNV\r\n=bnha\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFWmrXQNE0dPE2lmWUjoviycVRW+BQy4OiNNG5Msd7/AiEAoRFp+1ctAmYCxgoJ2edxSUY/KyVfGgUlQofgHCsIjNQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.0da3ec97.0_1600726130632_0.33074791773232826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.a0793c96.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-ripple":"0.19.0-canary.a0793c96.0","@material/switch":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.4e5c350c2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wFLzxXFq4wSwAeHflLwgr4zs4POOcBCzSwBGw7I0OhNSFl/9AvXPxHXMthNGwUxslsLjBX1Blzw1ptb60cfV6w==","shasum":"819314c7822f6fa512f54bcdef91050fce2ecc45","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6vCRA9TVsSAnZWagAAIXgP/iZKU+zUqdIhEH77CX/h\nkfSTyl1J/zWCIL8N4efM+Qf6A7UB8hkir5hyzIP5aeVbIuyHgW+7cpp10b78\n1181uleXDuXwKGYbQgKAlnRh0B2oXiKtPiq42WLIFSafFDEiWYmbiXF4CYEr\nvp1OtJMZ25g0A14np6Hs7rAYjW2nBvsNEAdzJEwq5Tru0Wg98gC519vAtblR\nKAtybTk+0jcpak5uDqVHFdV4HdjkjMQeM88/9FKi1+iHY21LBKRyn23sMMFT\nU/SQH9Z8JPsLOhdIbxpA6yw0xnGKDMeWpybPecIuzSDLZ17xOsW+d2GQsOZd\niGCGUZ9k5X5tDjXjl1z9AjauDYaHXHsMZXNOnWMNxYjggFfsFl46CTSUeRoA\nJp1URYpxAOjgXTAfsJHYCxSbsqUgIRFGP0p/efbjWVKhJnes22CuOW0paHYt\nLjCZKD+4vJq2fyLvA0vn9j0pmMcsNmXmQejbqaa7exNx1xH9jKf7PVNa/9kf\npya2d8PYN/d37K0GmsmmqTW7mFyskgzXqEtAMUX570bOgcBWL2XKfTaNzpQL\nru33410AebAriuUFmlMOltVPEk6sKHRC748d4h/iROf0yCft1b8u0NQBSEBC\naiJ30zxLd0ITHnyJqEFIAYA4oNDLkC2/bngzq3wcAxkmAFm70QUQay4znM9y\nfyTC\r\n=SV5z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEvWrQVcdZceDxytAPctB05MZ6dwFwNZhSe7wFgaZd1AIgeX87o44hN3XRLsoCSKGumBiOeDp29Ar6IdmKO8CCYg4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.a0793c96.0_1600794287082_0.8615255599558684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.06998a3e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-ripple":"0.19.0-canary.06998a3e.0","@material/switch":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.4e5c350c2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1EdhFVzCN5nk/h1MhdE+kMo97cLRWpHDeaeEJPcMvlY/2ifQyNvgdAFrUAtCE+TjKRZgRltp87HvbDTRH9jxhw==","shasum":"22dd36224b57973aa682c88ad30519d53d4cb8e0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakG5CRA9TVsSAnZWagAAMSIP/28f4l6apf6uDj96YLP8\nTLaYWvpo5DwNErudMDjRKavjzF5dnEPF9viOTHWimwsF5LL0507wOuQFNT5J\n8qPsXM4b3emlMum/XgvT1ibcLL7KNGYstCdTZ8r4jdOX4TNHjGlCBOZzuNkt\nk4lAra4P7bmqPPQVts8nL2foJvpflNN/sJwc7Bay6wLHMiLV2nN2VKt7sC/y\nuiVyWMbV2WasPdzouS4YfN4wG85WEYedULimZNKhh0It1oYo1SW3dteYwLYn\n4UBb/Faidg0okiReabyjlWcwpmx5GbYeqgHl6psJbV8mDmUukjKdEWzf62ZA\nsDqaSVgH52gE9oTKoITaayf7pyM/oLsdA3CGLQ+SRjx9cceP7Xv0c+dKyM46\nGqfAuXIfQK8jJjlnaVnZBrOBPRv5AXIMegaxAOmRDAwbW8Z71SaNrf4+19dA\ncASE00u2yofR1xWqRU5ulqVHAJa5TPaZ2elVNfki1jaJ1u/+RB9sefbtStGE\nxGBruY7DWGFd8KTPQN9D+O2bFu7New6+daJowy7kR35Rz7jTrzQIM77OQ340\ndpuOhpKPgrPpqDLcJQXmuKv56NxrGMpvRK2UcoldGi9suuJeO83F73NsAShi\nak93lcHsaavDf6aStDiSxJ5M1+14l4p+g4F7Oc+OO0Y/3GGak/PLUTmaLNNR\nHobQ\r\n=ojh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdJazcOElpLI994ooBk8yaIQ4Y38iBRTxIiznzSHHpXAiEAqAQ3A+fsFHfvxpe13d8uaqilc89FlDCli/4+iXkn89o="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.06998a3e.0_1600799160859_0.4959688477594295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.3484a90d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-ripple":"0.19.0-canary.3484a90d.0","@material/switch":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.16c563ef7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vJTjH0wTc9Ejy7ZxC1PTsd9PV3PI10Inmxp8MaObkTm+/0mAmYwaPGFswUT4T0QwwsNwA9W5v2+KevEsLOsfIA==","shasum":"cc99c66d63ebe834984e7b23774f8fd28bf4b98b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTnCRA9TVsSAnZWagAAho0P/1xVJdVe86MbJOYcStPb\nAq4QmbMEGGz/p0h4DnRWPtXoq7WKKNLWgNAhu2wLjcHTfiVB5ORaoiyfxaz1\nPuKrvpeqGfK15bNUK+sKzbEcYdsOaQ7WeVlwcerAfXXe5iGMgWcAgB+ac/w9\nR049oryHZM7tOEbJpa7xSYxmtPJLNw/lk7/b4BmgyvITDvRfIfcD9GlkX5A2\nDSCuHAySWM6HhjX4dWX+QKUGXK3vvE8US/N2i7+hua9M1ObhxkIG3Uiqc8DO\nXi6YGNzwrV8oT6NgEQxRVu0IfZBWgNxwixC/UkJXilGAkDxC0ud6v455SLNq\n4TStNUDuf1IZXCRLg33ZwmCxCS8QMuQRTE2Sl78ikXFQ0DDUFHBTG22aMWFh\ns+s1ihy2HDuMJGQDsNzaq0SyK7eUtb/g3+D/it2NurkcNp5sjHYJqgeYLPL4\nr+RPgmxZkX9Uu5nyCL/InBWMGTWJ7JpO4yHt0aaGmQL60WkoPmXrOWShvcGL\nB5YKSyPXU/iS6OBR0qRfHJMIbsgDARy/DcAlwKa64+Ykgz4E+BoL35aWFICY\nMYqElduIJeb3hSZYh7FA0a2tYw5C/xH7uVmX58aOf67wMAXTZmEpPYBU1osF\n5dVsyaNzXEhNaw8XwzZKLDdptCKMndfQhWcWF7L64bhQn0beaYPWnpA+npgs\nHVT2\r\n=MEVR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHaArPRFI6WThVeM/N3ouEqC/RbrcHsQcIqxe+VXqlzAiBHbDT893lV6aB7nT+q2UNrVOx46xoHAHwMHAGxcwYLrg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.3484a90d.0_1600812263153_0.21324323471690376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.3f99af40.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-ripple":"0.19.0-canary.3f99af40.0","@material/switch":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.16c563ef7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JVGBHZ4xIB0/xMHnrPcmV1gcsAIh0xGBFfg2uappW2C0tLEHJmHoTw/nZU9XzVrLI+/Hm6Bl5jC8prMlH1kiMg==","shasum":"145adc843721d8ef8f1e24d7a13aa2d7911df6a5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSoFCRA9TVsSAnZWagAAf5wP/3gTLjdBfoNP1KSEKqHw\nfRYBcLJor7ucOCIRKCiRXijbtIzTv/KJst7A7sU750Ux0ch9Fvp4JREtzaWC\nfP+kOsCUZCfM6E3UrMJyT+KdEHs2XR58ApTyVztMQiwA/m3j3/pefHHSfbxo\nzgzZHWaKxYXqwheG3MV98xdj9By+ZCKgCKzfiMerzagU64PIZURNcnmsH52y\nYXvJtbbtnB+ybMgrFPo94GF381N3eHa7XQIteoaWLmE+jvjQ2PNRf86ZTZYz\notoBD3D7WZ6ExmRmVI9GcZp45suHiq2N9z7+NkrvzrU5e/xd3ptNqA05xbYg\nvmoIXGVHaDPtf85paf2Bj+Yjhx8/ThEGcVecSVpscLWhnPh/yw9VmZPJ2Vqn\nDm7nIg8+AbH2qw5FD+E2kXIpYyn9jTiSI9vKbq6Dh+fCtI/yoEU2ecLOmPJS\nEQcfskBhVCAvkx29/eZ10Ysm1ERx51ge6twXv+5tao5WEB2eMdELce6jfa9Q\nGDxO7hiDOtbYfqzS3O65dFpDiJ9WOs9QAzDV9IUwWWAR2eIpw4S9ykEAvN66\nj0y2gCQG/vdbEw6FCpeRFCTNoQeZaHBhDWNHd55PU7hsS5HQlH+oLu/zEf8b\n9HilUFeOkLAuEgbPkfvbnWD5o3yDllwb+5SN6FpU5mdxlm9sKe8fAlsbC3p7\nOG1g\r\n=EDeh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7IQkG/UZYbOdjUT13eiq2s/icpPWC6DY3LJahAzJaZAIgUgLD13Mjcr5NIoKz4SKe1ki3Dt1+bSpj3t9fgDw3rn0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.3f99af40.0_1600989701127_0.942802901438418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.72aa1129.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-ripple":"0.19.0-canary.72aa1129.0","@material/switch":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-otEZVc4qRGR6pi/57lRRdIHGhHL/iIIXhSVRonb6CNKYfTnl4Kk40ni/vGEqL0DMDNka/aNNMvDcN0VB+OYDlw==","shasum":"598a61a48a83282f8d7cb6410f6e26bb38c888e1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwWCRA9TVsSAnZWagAAeysP/RswQd20CsHaCmXtmBSe\nhFedtlTG1ufogoeuvlaXbFzoqXXjFzafTG1LVUI5GLsbwRrvUA59s2dnVl1G\nn0UjYLfGLWVToMYZsg4cBjZbM1K+rPFJtpTZIXSjVHQCKTMMoEt3Tqq3lJmw\nohafFNlrlK2qQ3r5EreY1uJs8vvAAr4ISyKkMfktrBebiP5B1jgC3OMzXdpL\nYcjsO4dOD5jFozBHnRAHAMnfM8AfFBCsVaeWQsehZMEiE0MEsdYlRJjsd57b\nLZXd/zvtekW+VzNvhp/7eRCGAkdnqzPf5hhY+fa/S4Pnwjqmj+zsZu14L/3q\nuf50pbxWs50O0T6GyJVUlQLqOpq5ixLK0xZnWjaMsEFoBYWmhYZr1ANSjVSo\n18RyU+iW1UwdRUbZQ4LgsPmYf2FP0Fm0ZP2ozDmOWEkHfeKTZzEaqlW6ZH7J\nI77ihfLEMALiCaCrWV21FScafqlmYMzeRAaau0hOoJbK8tj76IpH7qAll/RQ\nWJSijQiGeXYoZip/zHwZjFg/CEV3FMbU6YZyeHizuzqA4Do4RFjquQzF4HGq\npazcNI3xS3WRf7O81hi2PlkP8CNRJ6XFcyOMdUZGyS8svpEl+42LHAV/xiLC\nir3j2dWaBc25beFganzBIeG+dj59zbYvB8xlfBMx0b2ntjW9heiXDJJKxTv/\n8cC6\r\n=x3tk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgaoqqs/n0sQzbKr/dK8QBIVphritHnupYhm5yjE1/yAiEAq7OLJZWe/9byfkjIPuK1ZZ6W718WrmYWA4SIydAGXMc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.72aa1129.0_1601068054271_0.9998030341303421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.394fd3f6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-ripple":"0.19.0-canary.394fd3f6.0","@material/switch":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/xxP7v5L0+rNGHJuAq1mdfqLOlnERgRgV9mtopp5pkPxinO+TWlIye/Dz13OuzMyXRR1iCmCSsCodwStjbSxxg==","shasum":"a54677bd1129fb40a2527251bc6696dcabf04bcc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9fCRA9TVsSAnZWagAAet0P/At6rEZxQSzUTEyMSDiy\nxbPONscUZwV+k9nrnHcMuxxr6wJ1SQiBMt2W6E9/DgNJZCi+USKmdaPGTmOx\nbBBmdKGTAddxdcbNzosYq1yaMwV70LT4ApeYKp4qi7XQygKmbrnLv1696Yh+\nDGbO5LwzbiLHY4sCNvICC3T06/GxjLiZkj3+GzSSxj0woFHPrurwAPtp3777\nvdbHOjTbdEHC8j13JZ87m5nrFn7PkH6cvFcNW1AJOV9T/mghuUPGybjEvCSx\nQHpgVPOeuak31AYUgvRiHrJVWRN3dp7qmAakHLR/drEo7xEKGHAwEthuH/wW\nvfzaHHXdzyfGuiIK017o/0IiebO0u27DNiLqNe9Ms70ozzOb9qmcUbyT6YQb\nUvaqewXJqxidmzd8CwZnHCtlfrBprcrzcFnnNAgpv2PYdaqKlkYWJ9umaqwm\nevDiOKWqzPj/lD+PEbJdejHw0WriQMVZ5gi6EHZavBc+DPMjR4p7pO1DJWcX\n3UghaaRjFEhANI0kw8fSlz+yo4rWRSmb1E01xsa02dsAxH02F+5PMWu4t3fE\nyv5FRKPuYaprA0PfJcwY08VbHBlyo8Ltr5zjiush3vI1pn2H/57Geda+LIeT\nDWQsxGcnnC/l3HMG+CHCxMdfvEAfH82Q0zl6kBwYzKOgWnDizSjDT5ZQhLNl\n5PzZ\r\n=xaJ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVv1dFqH1INjsPzQ2pvC3PTYGQ9cfC+WrKTwvEk5SblAiApqXeqa539gIdwHMueuC9Aur4abWcTNSLKUJpcZnSr2A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.394fd3f6.0_1601302366971_0.0533854750979037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.347110f1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-ripple":"0.19.0-canary.347110f1.0","@material/switch":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2btJhvRZ3brKWtf8GEiMigZVxaGlNs8HTXPYM2kdruwL/zVMj4X5dZB8z1fv8iCi91FL0Mx+hTyVT7yfaiOAJg==","shasum":"ef0e478a2d8be6e76142d4492c4bf7fd4c1ae924","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchReCRA9TVsSAnZWagAAZ2UP/AuSrRFqhi+EOPFQCivs\nUnx63030I/elObDs3du8zpGVHW0Waw/ukVHX7AmOGZEAMpBidRN19CvQvUe5\nnWZsgW+iDG97Oz3DeG+v9uCvHKYe6Zg7GvFSI7Ab9K4GeiX4/iI6+KIytyvr\nl9Atem/UBbu+1pZKd20cvGrdGutGdIxCqgYI1ux0ZbHATVrwbG38sDAknDAy\nF+uxlM1oM2mB0BM18pTMts2wgfOu0wfjuayifj3oPf92Q7nWvcaB/nbAe9Nw\nKPtd66C4PNoNVBFen7qJrlh27WhHOBzIsp0gta4la5owgbZN5YTSNoc0BZi7\niXQ77t2tn7CkdITNzaCnFzFbNIFSIPseQ6Op/IkuGRDQ1PwNnwj2W3mn73iX\nOos8a1tJ2b3TRd0UEWwv8GuDcPRRIKSef1REuit+xAXMoCDKOqEkMf4z/VL5\nrOCO8RaRflsoZSPMK2hqKJv1S1iYf5dwMR+1gd1z7sj6r9LA/bQPmXS3AH1O\n0mdaBRv0FvSEFtJA3nNIIu9HNGo7UcKe/ogT+Abl2BB6DDQZ+7Md8olHiPzA\nNmTmEVTgomg2N7tSAuFe0NzviDG5bYHjxY45qHxS4o5e1iv1TEY6r4SWZdSq\nb4QIYWESq26QtPNW4xCyZCxOZ+AXuqkGCNy/HhTmVCn2EagytObnZ/mLKzxr\nbRta\r\n=ghEO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB5koHRwWY06o9SbgIiiqPClRx/ilCeT1lYoWW5McZmAIhAJjBOH7CmyIKdHwWqDqOQaUMMz7BREskCv9qz8aAw44Y"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.347110f1.0_1601311837679_0.8795361970710729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.5e330bb9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-ripple":"0.19.0-canary.5e330bb9.0","@material/switch":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-RZBlmDEmoB45EHVI57vx24YPdSGNzvduAlrJVXQ9DX+nU7NYJJgUwEYJZj3XIasP3Mr6VJNmBf1edXu+7cMT+Q==","shasum":"a35a221bbee6e18bbc9dc5ec7d7eef18bb80d4fa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQA3CRA9TVsSAnZWagAAAuwQAIt1FLyk0W9Uwf2mt17l\n0pAXz81bGHIryowVx0BgbjE717i8m3LbCgfUdyMnhY+M9tpOvukUIB3wMfhE\nzU72fsFWnVOX1Y3vCMV3xY1JV7AOmKj/DqwgILnwWx4YzOIEKCPZaGn9o9xL\nGnz/o92GmbXwLdf8wz901jw6KVgOZG7dK86kbRLHHIoZVN6dcD2ElJadwEVb\nvAvMOfBgKMky3zIBwBGeTUSFdwLdLq/7dQomyIJNJY6miASZZuN4rSk41skO\nlv5Li7X23iQ6XPiP8BnfLW7Jf8mqbL1DNUH7imp5kD3lgpn4hFownfm02II7\np0cy4Yyb+A2WK1RPllJXxuFC4wgi7yzeBSUj3YRjNJKUTL9QJ9dB/Cyg9M7r\nsFF+6Ch1P9AHLKKuoX1IRV4wddTDgqiKzMgtJI0qYCE0uSxxOQ4FuWzZM6wK\np09xLynIOChJWbst7vDvBb/j8TMlrPHY2uXdJynXKRofWpaoOXQDnlrKZpqo\n3ERGr5joAzdG6DpAyp6sJB3Vd0WiOXMnaa281Y4Vev6zpeSqzHbO8sTaH53Q\nZnrAJjbr7cIze+k0+xLeTajo4VTNtwZqdfBl3vfOp6pw0tc2E/8KquSng+Sn\nUiXIw8bYivVBLXPjUm9misGEXyh1GoxQqiVERydmLWjjFu8BLXQYE3UNjO4d\nF/sj\r\n=L9Wq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcnEe6DAKAzRAkmH2d6HBUh3nJpwQnMlCFAPQSsv6YxAiEAmIew+lrk3uKoMjC0jrPDjbA9llRW/rlN5hMtugKWvvs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.5e330bb9.0_1601503286708_0.13819749352287292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-ripple":"0.19.0-canary.30b9e3a9.0","@material/switch":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-e8pZgeES9e23oc6soyCs03v7/lDqyI49+5gHGk/ie2UFVaoZAItvAJ5TfwRcEZu6T/pzTczuQ1RovEVe3Al1Aw==","shasum":"21c4f06ecbe3ee842aaead28794e717f3e8ca105","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjiCRA9TVsSAnZWagAAOEQP/3n7XH/X4ikL78P+lqbb\ngXPLYHfdqHhHuHT/9YiDu4ulCWnvWDECuReWYT1vc21ThePIpqO2TnIhnjM3\nHXHFZpzkRW2XJF7JbGKkAjlCMH/8a8a+5RuHLKipte0N+MdZqhWrd+/fCbv1\nerAHwN+caAHl7bTVv7ErkNfbh7VSgD5/jXQgOZVaUdaTVhbrTwMpkO5cqg0y\njhLtO29ipB4ArzDGaHlso3cabgPQb+NziNKG/z9zhh5dlibtT4Pho7y1yPI6\n1ircIBYdi2/q2xZgTegQm0IfN0Rq1QuWYx4ctc/KEuJFDRT7wRGQjAZWuVEY\nhFkWYUZEQA7XDHGFjJviF5sT845KgLB2C/AYrkH2b7v0Paq52p1GnoRi5pc1\nlj+mQIUKLuzV5uKXpD/YeF1esHTLarQDPxci/JO0WZUMA9o9qziVa24Jmk1O\nlnp0XYenDujZspj1CMjZCR7NCRi1hKiO0oOZEHCvmCmBTZUlvU8W9tMtbqmD\nRASqIerTKuT00bU+Wbbe3hbhMEnHYzpDlnlI25InOiV5bwP5v7V3dGVTidnK\nfxCScP8cOKJoz1dGE3UcztpnfuVgAfXrZPOX/+kyTe1hk+g+HXJWRw902TzE\nDdSv5veT/HbzctOtGragNvsscjcqmllzeXkigx3JjQ4Bj8mxpX6AdfZWPfAH\nw1gc\r\n=CUlR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHV2j6xZ0WVFAPAC2nEqbggoHHXb/b/hBP9ngPfnCWBbAiB3qV9DqlybbVVQbtSkFZPlfm9sUZSUNeDZJP2zOwOK0g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.30b9e3a9.0_1601505505769_0.6364215093782695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-ripple":"0.19.0-canary.7bb04b9a.0","@material/switch":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-O5v8x9G2phKhtukFfdwRYzq+7qquinEMnIa+M7g4RRfm9nssvyimV1YeRckAT0Nz0bdG7gh5vqFIWYZ/8bPwrA==","shasum":"d0e5cd94b5c819037be8f2c8a92782d2b2ee76e1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTmCRA9TVsSAnZWagAACPEP/jq0mGuGO9toocxfYmRW\n1/6lpYwzra/qXkwRFa++aIIeNQLSOp8lvh3qjsxds3SGe0KHCFVgYcIegXX8\nI5tkPjj2Z7TVFfEazZJfX1DU8HBs/7qGQ4ccucjK5hq1xflVe7rKx2jJeleh\nDtuqDKzNRjL1fRFEM5lC1eODCnojSQ+IwfCJWhqCdEMVpgwEi6IZgjFdgJCZ\nm1xyflLA3SL07GQUyTSCkVuW9OC2vSiYR05Rq3uu4hyoR6ibbnQJZ2DYFFCc\n/CddzBunKEQu5CSDWHnTf+O75U2+kLsc62VMzsc9kDmEvjY3acIgQpWCONFs\n781Bw0koYJjIFdLKxefUZhLzM5ujvoDPONn7X/5KWbiAT15FuBQ8kOz6tgHf\nkU5Ykc4kcUipx3jpJy704diqyQf+0eim1YX28evK3YeAQLpHq22tXFsyMj9K\nuHcF8qDQ/W6RxdBE9jiNLJ1b+zzJwUm0NIByCza9Ec5NqHO+qsP3fAIqvHY9\nf/nr3o/eN+xgK56T5DxmKf5/VbwsxT4QQZMA3+paWiwBbnetUYXISJ92MqxE\noqw+LequyEAkvGqZaJ6/poHYugC7oaldH6RMFh4q+Xto1hJKKlgPxx4V2yjr\nNvyXUrpCVEJdSjEiuIafh0/q/ghdP4wQqep2j/Cj5rcz5s9u6zsr/UAAXren\n0RyF\r\n=2Iai\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGad/yFDsXlnzS9IhXqg7J8SmIoW4llKk4+B/ekRRU9AiEAzeyU5fnzxr5Y5+az5bM7iuRCnTHNlJ+6I9U47v90EZ8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.7bb04b9a.0_1601594598234_0.3720366006682543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.615d861d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-ripple":"0.19.0-canary.615d861d.0","@material/switch":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-iTwI+is8ubl9oFF//3U/Mqp+vOl3emXi10XDYHLwALwm36PCkH0ImgMia74cUSvANi5GdQptaZLAIY42xrPqyw==","shasum":"1e1d71e0f58aa83e39c880f062bc8e1980252475","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNzCRA9TVsSAnZWagAAEZ0QAIe+muMc0DRzR632rDxx\nxiSd1ABLqcEYOdwf2/P0nZXKl5DNcqSB3AEZAjh5wB+wpBkmwaIwJs/3UGjT\nLFFwBwEdDOMLFx3twSSgfi9u54xqo3JOOfihYCRlGqYe3CK/9Z4TgjcM45BW\nUISam6+nxtL4lhZcVXrkV/Es/TH2B8qoRLyyb1pS50P0iFJclC9E6/vOrT1G\nyDCdH/rV2AjPtlkwba9MuoZNrdvYfNYsm2PbrDJhx+a2gO7RRzp4pGwpwBDU\n0b1J68migB7pgIY5OOsrjTbGd5Iz6p59OiRJc663Kp1U4PqJ07nw7Xq5oKu7\nviZVJmaJhIWq6NHMXV/zP1Yj0mDfvA1BW3CA12nliz6nX5SmI5t/tKu0m+f3\nmRMbSowgB8FTVgdNZIO4o/jpm7AIXn4ftcplzBPFEOy+c8GByOE+xEjtVXsj\nW42PEFnqMKfSLWA98YxeOg4KCHJ+bRywDi+suExAWmk/4t2BfdAsHJgFtzx7\nDuW3fsW/zEEuFUXznyeZpfqMlcWgeCsQYbWCn3R7Su6yTKPFGb9RU8/MQ147\nb92bPMoLpGP+vrd1yC9b10qgKQ/QEQu6YqNziTTlbFgf79ZSX4sN4EJZztZy\nOd8FTBG4++RjkfeefPs7BeEIfBwlG9ryqJQB4KKJy29wn6fVkUOsGOPzPVBO\n9NOr\r\n=58z4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGp40lhhrDTm8phQmhf8+JBAslVINSrdKgiFwSRYDwsJAiB+m744LzBvUZ6WOq68VDn8Xnb+hKJINGr9PKmNSMEKcQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.615d861d.0_1601602419247_0.32062326668946395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.af110e86.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-ripple":"0.19.0-canary.af110e86.0","@material/switch":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-dwEgLL0Ke3MLe0OdkE+jYd3RqTprqbzRi/HIS1RjfZ/ukwmOpcsxqiqCf2qKwce5/Pk1q4OcPQ3nF9Sizinl4g==","shasum":"58f172ec7cb7843eeffbff31c2967036529c553a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7y0CRA9TVsSAnZWagAA4sAP/jWFFN6TClmsXGy9Tbrl\nm0i6FMJMEXnvX0QoqxR9gt8vJmiZJGgccZr4JzAi7BTdt76WM8yzC3i3FC8g\nYOgD55MQbWlUg/IJCUJOYqRrPi1RTDXq9lttMa7h6UCIgD8DdAZ84a0E4k7B\nl8xHsOy8wkh6YC4s7oQSeZoUNcpCY4yiwn1FM7/LrCDxNnXUlDk09D6c4qQr\nYvrPck1zkSaXpUTlwd8VXMhMsVT0+0+iHhIisav/uytt+bOk6K7VUS69b6fb\n4vWUonOWSzIEhHQbv5GDrsnZKutdDz/7cyVZ8J7BFLcg0FqZh6pXBY85nr3d\nN83OBFFIXQtrITUm6+8GjRhU6v9huw50nBI87YmkWMta9FMlUR8qOqwBv7hd\n995ymxPsB4TPQoIokdqivDQF0p07w84BdWy/EnJbBpQaZG1bHFZblzZUyIuB\nnh4g663wZRo4ej5L5Pz58c6EGMyhUhYGyd3GCYDQDVIKmAoFm9hlhV6pxIYD\n2KXiFgY4o4kap8QT8SE8sq/vyU2vsaaG+psg0xhgLkZedww2dEMBRAM6eaYv\nTLTvyLtbWMcpnavKrymHp657z/6QBPaMQ3rGhYc/hLTewuWtXZSUG5nFLi0I\nMZjn27DIo4wK80wdq+BlGgis3PNcxRj69x+qvtUTk7S62z25KVpp3QMM47Gi\nEyhh\r\n=p2hj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvxjfnC7D/sHbVRIp2ByQH/6+doriH0Oo1BsLFhSqYAAiAQBVOsbLk1Z/74COuNa/6JxhsRxJrynv+rztYV5YTPWQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.af110e86.0_1601682611695_0.5312796294169873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.89d27ca5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-ripple":"0.19.0-canary.89d27ca5.0","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-kHz9iJ4coCl+5Xt0fGE0ZupdiVtTn8Xz2uqlzNRr5mVFY5fXxuKGHSo4ahgLIieT1rzlg2k0TYrNNjxvgHPoRA==","shasum":"14060b58dce00df02a89da66817569bb6c835a17","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8f4CRA9TVsSAnZWagAA5uAP/1STPBHi7JaT/BULG5jg\nHxSS4FqFcsR75nqsnRdwqpC3jZaihvZwTxwZJ3rrYUMgcRcEmYIdZceK/xE4\n8ZJHHi4XXXFYquZg7LeO4Rc0xKlLdzi8IIsOrQirWGy2vxVrCTMD0Q/rCKou\nho6GqtWZFr9f3gvwrYDcMFMLpAf20YJn1IZ9k7JnuPWJZo9Fu7t8GZIopKoy\n9c8WRkcj8yRchzPQTuw/0D+uD6IIoFlSqvQZSyqAtcUmTlPoUhKOTMEDNLds\nmrbWTUrSrt8IXhzDSym7DrkGfHtBB/NJbH16yodOgHmw5pBeptvyh7tbyplQ\nMNCz4mFJu9P10H3sM+QvMP3pQvjVYNdwE8j6QZTKE96LTSgaqi775jJk9ihb\na1SIn676E9GwZIhlcsQ3HkvsQoHd6mMGLMXvG98d80II5HYuztmTxlLrMsvH\ns0UYOzXztjxhMIfX4Ql22pNB9Cks4Z+qsxLh/ZcJGrqvhLazTQO6AjUT5cEm\nrvXCb1irX5wns+rRzer9TbFfwYo9hcaqm49WDY7ibVnhoNLjuTqRGWN1XYtO\nGZCAiHZ5yi9ZaJL/f6uwoIlryr+LLzdvPrHOK+FzmaQDFh5gOs42uJOVp6Bi\nkcO+KCVarXtmDKZIW2okbFedrM7TmE9kfU7rqY8wD0lI49VqBIwP9t7mp9Lq\n9zKt\r\n=R4Y3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCozzYQpvkte9uNXnY7k/FnQ6tjX7iVRyEHgJ1VcFIg6wIhAOAvdBzO/0D8qmmcO2QZzGgoqF0x482kiAG/D917+kG0"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.89d27ca5.0_1601947639685_0.8175799539791186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-ripple":"0.19.0-canary.9ef2e7c2.0","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XAtizyUEeXrHF1tGZlngccPLWQBrS/lwnBGSHffQUQY6tn+cnJep/ovBaqoVSy9MHaIffKROaLkBh57mrPaLTw==","shasum":"fcc00420923a7bd8dafaff9b182cfc22c71158fc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhsCRA9TVsSAnZWagAAu2cP/3g0vD2cu7CsKI/1AUFM\ng36jESISJPlYlns8qiuRN06mjFKBEtXtRERelu/sYozyj2NZAOZ5gDlVm2rG\n6hhGwegljq1eszEkf1ckQRAmzBugPh5Ah/2MJzlJxt9Eif73QMD7PVqK9UYf\nDxk4EoILpZzKbWJ2p6f8l4wN7KbsTGqZFCcQRa5VKQ6H1HJLcDXvDSga2MvL\nQrCfAy0pe8O+W/y8D5lE4CGwgIa4gTDLoQri3SeSapQ6EIp6S8+5++AjE/Pe\n6Vqw5S1FC6AkhcWnBDSOZCbA5rp7dULdX/DtjqYCoeoXCNDZTc2NCHx1/Db/\ntOj62hGL8e+dMm6anZDeiQcI2NUwaZ3HKVqSRJJV60nqABYzkU7XaZoweclt\nZRcxVLlMnfxi5pPLtbdmeepyX/cKrUP3gzQCo7uSO9N93sW5M1E0EY/lgyR3\n2GnWxWh4TI4P2ta6uMk2+3qXoaDlRZI8qGVAlKMfjmzy+WSR1Jw08zckeNRO\n2GWLY9tnlXE1VmIAXcj4Kz5RhrhS8z6XoemFfpgi66Dyit8NE4+bIGYMn+vC\nyPbIHqqH0Y5uXSNxEGCxVaiXmfwB+8p5pk07eY15Nry2xtfRsUSZuFmISHOx\nME7VySlyw/Q2rlHpA3gmyGGUhzwAH7SfxJzfeqYwfHpT5Fyt1Ve4ghDXfrGh\n9zeW\r\n=qdYz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHi32qFeLas8QPm8tldaeNhyyiBSIiQgBpVmmltrE4RhAiAHo+xDnQlI5arGwZe8Gw89gMbSU4zHefGfHoLViTjADA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.9ef2e7c2.0_1602029675623_0.08723771096480215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-switch","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-ripple":"0.19.0-canary.96c8bdc1.0","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-dsMlbjoMekt5oGtnQNJPbsEzubY0y2Kb4F7AmcT/s9lB46lZTmWsgulUCh7Tnv/XKjZCacTLon7icKsSi1JHNw==","shasum":"564892de81b3066d8c4b9124d2799fc4a9a6a7b4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAfCRA9TVsSAnZWagAACU0P/1s86p+KXlxbEnr0ikvB\nBMXFI19n3y9a0UaIiW+Q6aY5psRuSRVGpA+UAIY4nS1WnLjgC9LoIiSq0ZyT\npdSfn/5pfZLadQt9aFI2QxZnWM96QjFvQnQE0mLfoK7TV3JZxTGkwTfDkKeK\nUuyEmNl3sCu97EA8KRcpruIIxz/banTsz4vQKySPnaSEWWYLzcz0UW0/0llA\nYLGL0vm5KI2+74ttHhOELIciTfohlNk2Qu5Rno4J+yKwNydOk2z500pCgrQu\nzFd8KtMBll280DvkzSTrCVJUUZpb7eUsvFsmzWxOUF6byx132DnWafOHihgA\nFQ+mxM4EFhTFUl5nJoQv7Vl01VaODje2enrfrUXLJhDsnpfozoM3QAji4cyo\nYaGYlko2bIiFnfEeruVUdYwR+6IPhei/vgHGCzd47M5Y5acrDHt08DEgz036\nTBJpowJ+Je6s4HOGrY/5jE6gAaSR5S+V42N2BURHWBTpPf39El8n3vF9ZWMR\nNTiHWrCzPhn+DO9N4WTgbC8Eg3EMJZjs72ZMxbwwCuFeCDvmu/Zy2m3MbNf/\n4gghG3J+Na76q1uzb+H0rZkRanmmkFDLZh++xm6hT+gW771GFn0anzKJRong\nRH1Vvca1+Ip/8zNK57YPRZ/eOo5h4UBZDq+fSg3dBhg2Dkn5dbJafT+Wj/lg\nBjWG\r\n=aPt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCifcaOaTaU3rcDUzesetClOfshfAt3OM/b/XmU6HArMAIgHQi5u1dU3ljPeMz8lInzDRqNPItcaq9Ckgqeniigxt0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0-canary.96c8bdc1.0_1602101279119_0.18747996228925734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.6c21f034.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-ripple":"0.20.0-canary.6c21f034.0","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-RYpZ3Bs5MntVYjrFUd0EtnstDVlkxQp98kB+ULso5ZQBAoUVtS+A4/B6m8yJhba43ja8LVHJJ3sapzIcRvX7jw==","shasum":"3af57afd9c81e86343f1e25883544bd84282004e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGWCRA9TVsSAnZWagAA/jAQAIelyU0lzqNl+rJJnMrt\nqkK0+TzxrxjR8OPNkN7C1j0bBsafVIICNigX5N0KJBADZwHGes4OLO9cIZ0H\nrAkndhPMsPakWesnTmwCeJSTv4Idij6RcijbxeAV8C1QLN78bfu18JDW2h3E\n28eaJurwJcpm7iS8LM5E6C5H3R3Jw0M+C5chabD4NdBW7lewrMN3Wz/2hBqJ\nPyFLZg8Oqfse0amSzZBOWnLl00KGuaX5dqMZ1xqlsMu9dCi7jCRTAwJ7VD1J\nYDGppiemnWDjHYVQHWyys/i6Ov3y5m5BDo1PQL5p+4hecwmEQrZBZdfdcCqU\n2NRyetQFtPjZmfr7eNMSz3cR44K5amRDDYFOUiRDBI9O38urEPEDNH0bXOSu\nqt3y7mnisHoDJ7F9p2SZRulUf3F4VVxd5CsbK+5s1K3cFOXg6byCNIN17w7C\nk9o8pJLPzdkXR1MsnWcl31ZdGsrBu7MHxitWo8Df6FHVY7ZRGGLH+wldrDLm\n1rBfwENdsjvATeqNAjLS/5eoZp4TrB5+rcqGhuYjJKARgoO7MU3TGWCojDP4\nCHjwFC1Cjy9I5RKepVz5PRh4IXJp7vK+J2hHJdIDb8uZDQ/4VTkvAC+XuLJ+\nhvif4z5cGfKL+lAzdvzAp+IJqw/g9Xt0s18s93SNZFNECTgfKyfSYeKEIsqp\nXS5a\r\n=p+ML\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgN5SVVsKS+B/x1VeZ86cOs0JeGvQ0CL94n/VmvHGoQAiAEVPh07hOvob4eapH14runUfG6WICvfOjqyB7esJoHaA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.6c21f034.0_1602109845885_0.9485872601888115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-switch","version":"0.19.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.0","@material/mwc-ripple":"^0.19.0","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-sp1krGI1soinbq1e99UiQ9MZD6WxKT7cu54DVAC+ZzsKy7kWtTwcMRxGwtXi3hEax6vfmsbGln/loMCsBZz0eQ==","shasum":"74ee7772f6cb683838304275ec50fea13b569b7f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.0.tgz","fileCount":13,"unpackedSize":42966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkI0CRA9TVsSAnZWagAAKP4P/R5D2GUYgqQRbgOW0QW1\n3vcVBG6R+yrJZ4QHvln8l5nYKhUGhUR9CP7RDMh4cQjMGjK3j/TvkoU2PUVj\n725H1caktzFBj+BfXNvt5orBhyPKfneiBqOASsN02oXTIHxb0e1Gv/mL3D2I\no2OT8DvjGI26izIMC7qpk2sDiCT+2NGZxykvPzp4aYAcZ+dwrbw16dnXxwYm\nI5JNJ9fCuQRYJMJ4TpoLvSMWPNW9RA9j9e35R1hCYhnlzJyyZxAuwquR0Arm\ndEERhyeLrIV2WN/M8fROuldqhL6fC2wf3X+gt9zbbL6wjuSYn79fwlaiuz+W\n+4l+pTJXiNqDzfCMWzTj+I7QbblxrmdT6NzdfKOr7+PT75N/MFCf9JaXekyz\n9yLDPSzaM5ugd/H/FoJY792S2BKqx7bJunxIByr64RYS2vWx1SXducyNZ2S1\nhcU2DPzQhrknthFze8zlvhK96CM9LVUY0QMJEhFELfgp/Unl9cFiZGlZLtV1\nF4Yn1558WQQSEgnqd0f3+qM56RbFDFN+rH5XCnKj5LTiHtUsGHL08jA9Lzq8\nUfPqbuskRhGygTujLeFSr9D6cs9k+8el88rCDyDJcNMVv0tv6u3zpqbj9Pn3\nU2ydZnLljKFJ/Sbw87afU/Cmup3gjTTJp3x8/m0RDZ4TFJhxEI+C0oQTid3e\nNldT\r\n=WoGh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaqPh9wQeEtJG0QxqLQq+lq0E+A1G1YgjJLrkv5tf5PAiEAnD8FGtYBjrXGCXvFoMpiQCKYswygkqFf2YOuJCX4Tj0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.0_1602110004464_0.28417740786918966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.1f026aaa.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-ripple":"0.20.0-canary.1f026aaa.0","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-V+VEh46JzK7VFrXRbJEaREJVTD0DjRZwNDMjRqtEDkNeRgt2mO2kHIJPcsnDh29iAbh829cgEd2qfO4tphghiA==","shasum":"7c93d437de7081ba15fd3ae2edfa5b884d8b455e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5iFCRA9TVsSAnZWagAABQwQAJJNdjzuyJsMKAnnL9kh\ncYAKVNYYvNc0PqHnj7u+q5gvq2gb2us+SHKZPkBFzN1uFW9TX8MOPi+D15qd\njjoQyEy9ErwPhE0l7iR1c0d7pEenhqyg8WiHo/Pul8HiO9Xh0vFdEm1pnOuu\n/TUAkewhOw19rBmX4IOOglTGD/c0JnrR5Upf7gsH6gA3EDj3l1WbK5mgqOs5\nNCxm4XS4n9isS8JlI96NqvZqLJHsdZgtdqNGKzZQMSKYbIkdr5Db12z2v+mJ\nqw5oIUukAmmIVrWo391a675v79DlqeWftAq1MfXtl+9EjGkjU+UQ9trU1AY4\nrS+ixFaVxuUaI6rew2sP9Y5xAZU4eVn+4gkZV6zQ9QeWKT9e324WjvRg28H5\n0FlYAvLbX/m745aS43Uz/wpf/g2XgbLSW6zdesDvnajmp6QEdmCgr2AzApmi\nPyKqRazQDo0EexP3Lc8uwXn7vI58vb/m/Uy0W20nLKYL7tDeNNEG4QoZJ2Kn\n53Wwux5QwSLaSRmO/jp1NyamtfhTkGrkAb2fPJFVw1i/1b3hBlRIMUEzuWLO\nByA4MA9nWkwuGSE41subyRuam/72aGYw6Mr60C3EqWjjBixjjYFbuh0RV+FC\nVTJgtb/IoB0/a6H4m4uxIjPGEXlhkMtFcDEk8aSQPtbz4XNTBeGgb4ap+/DU\n8Y7f\r\n=FIay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtQTBCSXuhLvUIkh4OX7hWoAoN6w/hKetcaT5tFBqoWAiEA2TcZNkenllHMJoDCXdQsjaZU17fx17NomLEBPgA2nxA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.1f026aaa.0_1602197637373_0.9335516835911037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-switch","version":"0.19.1","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.1","@material/mwc-ripple":"^0.19.1","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-xzdAXCA77Zs+6PEZmC+WULwe4+DjfCqlEAJ81JFMoXSx/EMyj7c+BJuWv9Ng3NPhXqqfp7/BIPnM3ljuE3p9hA==","shasum":"be81d49324353297a47577836a1526ac006ab731","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.19.1.tgz","fileCount":13,"unpackedSize":42966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tSCRA9TVsSAnZWagAA8KkP/106ye5ZUmKl2nfCr4xp\nU3yVcN3G1/hReZRb1G6rX82gR+mUtQkFkcMqKnPFwATlPbvtVmrBnqTUEgl4\nfQdGGRZQP4Pl7E7r6RraSIwyjQYdKwFmaO/859YpOFkZddmVZGOZeMa03Pka\nnHOV0/OmY5PZo0WAAzzhQ/RuirxAJBECjW+j8KcM/skOlTmHl/iEoAxP5bYX\nJ9O/SlvpIKkvVGODp7YOYEJ1oB/wBr1iQNj16TTnn16Fz22+5rH7Kd6cFO4N\nmlchTowlQ0Qp02EfJzx38piIkxfx7mbWAVN0nZ1/tFKYnltvYu1S7IIetXOi\nipDLmjNuPx+C+DzfDgTV5McXe2EEbj0t9tWnstSv+e62nZTcF32m40Aje8w6\n2OGv8cx96aWi7armP6496seDrmZZ3W+5Akl/uiADZHogH38WJZnAjdAayXXA\nwTZBaZx5nzoQM1/8qQWCE77hYIrRC7BUCsA5/BUxnqlAv2qFC2cXbO8FF7WM\nlyfMhqvCoNXNxbb3wnJCaDNxKeJ93oqxfQ7q8iaG0fQLoQt9UdDBQcQZ6lB7\nV0VFyJrKDz7rJb+cwZhc5nIw2YjGlZ+QFkKO+5kVHHYdczI1hWnG0fpMXbne\nySwGqaEVeaj9bqkH6obIyFAnyJ5PNsVd38hCCrdNEF9oL8E04xt10H/4SHOc\nQkl0\r\n=Z8HE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDYcAQnIPqzq3jgNfHln5xhR+gqhDp+sdhnbM8pdackAiEAzPM42QEYVmviGvHghViriIeucb4tYMkl5irohRNJOTA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.19.1_1602198354465_0.004596057705173795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.5f6894b1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-ripple":"0.20.0-canary.5f6894b1.0","@material/switch":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UDi/DMKdDghToLkxYVtj+Z/4SLMSuOKuAAKlUzUwBHRJBSwDTEMYu4kxUHo4nkFJnLPxqRSfKkV7/l+N3aCYgA==","shasum":"4dd9ccd14d1c21f306b2ccdaa55118ecfcfb7d21","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5utCRA9TVsSAnZWagAA2xoP/0aJzRJaFGECkg/7Pfaw\n+/yTA7NKrOT+6T+VKYr+tXv7YMx9bz3lTbY2PUpHsXiFXIGegyRCPipFXoLk\nSZuBvpJJCqAlgWCMvtTkczRMWED8fOD53dPtrxJp1WbbiEssSWXVDEvwPxYq\np1hQmi6Z3TbSRoD7xJonec5j3dpB9g+Fi04tKwqAodedXuKo0OodyL/M4MeE\nU2365T+68O99GENjUZFnKFyIsTBtm8Od4s1j7R5zA8KaF18gNEC4KdabFu7i\nrX6A+o4mixXWtKPT5zvlzjgzGW2SeHXTjAuTnDM0U5uZA11Dft1T1/Fv5VBK\ncnrSu9x7qV7Rd873SJoHm3bTXUr3X6bgAe4bZzqpqdQFgwi5fzYwOZ/F9SHQ\nRrCRgJCKss7vdPq3MlecqbTEzjJinX57BmPzKUuZMeag56auyTQwGI1TZjtL\nmPdFXntZqORF/K1G38CDmFXue2H0fFNGuCLCwOT9klHORGi8YKaCI6CtMHwy\n4p180ONmM6soDW9GGi5oLz8pWYW9bALrCo1P5jmhXDEf0c6T0HVCeuIuwC6p\ncwpmjItisJ1vRAKZnt5zMJVeNC1opq7n+aCwGO+z4svc0ag6UGpR8/Nx43pO\nv7uoM6O4bH0hckN85YkBJl9JsM4A33A5k14BYh8f6Tu19I2oZUOdGNMMxJrX\nsWQQ\r\n=7Cgx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFId4Ke9I17kNIF/wQzaeiW1M3PkQmGJa/eAc6M+IiwqAiAeWtjh7IfDV6JH4VJSbb421548ak3bzS295jLQW/z6Bg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.5f6894b1.0_1602198445481_0.6826750085600239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.f6260d06.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-ripple":"0.20.0-canary.f6260d06.0","@material/switch":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.8a39352c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qiaV0bkd3Yeg50wup+o+N8HdQ/UjD0dAKatLiJguu4NKDq0DxnsFXOhZiFofhi33Q7i8/jgbhygBBnJGxNidmQ==","shasum":"9b9f16032e00c316f8d4f23f25beae9aee828843","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNn5CRA9TVsSAnZWagAAbnQP/RxWrr3HXSLaIDkkAsDe\nS9soIIAJxp4ukpbFFhRnF1vrWTw3fm0gAkbPKSXf3QgH4NGOo8PxQ0cb1ULy\nqXazsWMIxit1bS1wOJoLm+9za0k1oUZN44JMHf3evhQcK5kk5ExeH2V5d2Lv\nvu5UjjRCAnSnu02jrQFPtbXg53wsZQEuSbUal6QNzpENvEa/T6NEw0j0oqH6\n0BchIqAA248pAztlCLwPpZAD6NPVczzndIg6Dp9Pn/tyH8/JBkOQ8CIDjq9v\n3TdZl8DzZXu2PljdI/MAsMkizvll2DNKBWYh5fH1Ap5oiezjOkW8qm43wZ8V\n6liCMlSb2/RSP1bLMM5JDi6eXcBe1Fw0ZGtOGLybvcSe5IGASwW2An6zEaho\nEEIt0SynH7FeaYweP5reNzEc5s3JXTTAn5bwdGYK+o9jmQZQs8YY+44yv1h4\nni2/k4s/xWUUaV6L8MdHNsFIMpcb3xxIyJ7uLva1FVySesw+D2yky3CDCSs+\ntZr4V/IB5Qgt9LQDt36BR0+qCpQ5QIeYsfZRSMUxh20pO63GYyMDQiCuogYB\n2VWvUMugWwlnOvWrnKtNfUZ958PvnHymJ8pQmtYIXB4YF6gtJhocFGqRmYCy\nocy7xyAVE3tkg/jWRhRW9gSONXnDXN0oUpBgAvwNYuG6QaBTs5jmc3wsHstv\ntqc+\r\n=sJjP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGilE9JOxYGsLti5UdjAeRquzlHUkWIYHy90Eo4F13e0AiBDPp6zF2/5T/uBR3kaCPuQM96Qlg4P7YwFjpxQxsWrPQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.f6260d06.0_1602542072530_0.15038229969668415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-ripple":"0.20.0-canary.2d1b08aa.0","@material/switch":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.8a39352c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-71Spdq/wijPmuB+dBZRLGP7LszHzKHgB6GtUVHo4HvcxJkClB+SngFEBXd5irw9bCbtcPfpQ3HioD1ZQ3xYmkQ==","shasum":"bdc1183a6423fd3413b95d8876fc5f245af23bd6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf51CRA9TVsSAnZWagAAQb4P/3Pf8RXtbIDhnX6dJg6P\nh1o5yQ/iNmcuKPLFGOePNYG8qTIXwaN0kW92YOzTdHgg9RZrVkGMSA4hPBQP\n4OV/LcHQ/J1z2r73BllnRAGwwDYkFsuzDUloALccUTK1kSBMQ4Bs4hp3efVd\n4ZVllJbB70wAbg75U3tdLPthb+z8cxO96NHx4171wXSN4awthG8UWAMmqqfm\ncxDYYn2ilIJcDZ6ESolPfrTfl/MEaAlCYYi59kgktCie+b511kkIDcR4j357\n8H4qMh4XZj4FLr89At5LrYi4I7bg5Kq/4efiGtc+a/CHHsrAuC7z6g5RdC0m\n8aif0s+SyM/3hTAZZTO4j53ZMksBXbS7rLxSWOjuD8Hg8Uz+oGi5cmqjjY8R\nY9vmb/Mqx159i3EBE3AKUkYstY6Mo5h1jvBSJLoFyFoqF++3rNRAFDk+qM+3\n7UXw9D5DkKRac4qlKzxYlM/2K2dkNSjqJhfg5fvY8pccazM1GJpj9vjF+vAH\neFKNP2EsAjJerBnOXGuSXBh/rUDm14hnXsV8xO2htxEqZt8eINmjJRiJ0FVn\n1yXxGa30VgRnsSfph3Yy4h8E/KyxoT1McY6GxwG5anTn0RkiFQrr+4xhAf0o\nO6elH+0h5LzLPaY/3Iy3winaKS2hdwxBDYSil0lQ8kYqLK3TpkWKpfKcuPA+\nmjYj\r\n=wGwg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZgW26jKdsCbNOj/E2T3cT0LnERQQ141UElDVK9l0WgQIgF/P1HyFJMGCK0PiTqS5lPr/vhEPcsyv3PcrFNK0acjQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.2d1b08aa.0_1602616949347_0.7620571461936716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.5bd58844.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-ripple":"0.20.0-canary.5bd58844.0","@material/switch":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.790ca85fd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ivhX8TuGBR0edTCjSB4IEtN62ldIRffxieY40hp3qLXYUdNpZGF4vYRJUc+mGc8LXWrrpp3ZOZSArcLCC9pyRg==","shasum":"5307ed34883f75e074dc8322e632f435a0a06a3c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxaCRA9TVsSAnZWagAA0zYP/0e/stRMp03H7M8kawUs\nQialq34nr3sidnl+7QZVAe9GsxMpH19pUc2i/z/oPAA/+VTU2p4i2ovLB/Ep\n0DAtOut0OePaZ3z9FDzbFtZxN7DLMTEiLgmqFA20V1obtd8rG9LidkqZm04d\nq/tcTCydrmbJBDeIBR5SHbIXvRmgOcHkRkOEm9MqSH2aI5CgoCylYSajiq1u\n1DLCvtDFuxolknbKjAvCUPPaGLR8iceL38ct/hdbLF65yNcT30CQZu1075/G\nOQ1wklloin4z9c67VwyuUSTbuWyRPKqO6u1ak5wvmaqNvdRGa+weFXeF7M8c\n15yamsXMEsx7DD1fHMXBWcM6Ogiljqjc3D7L6HbdYpxdQ+iYZlTGOE3Y5KXT\neqKWTPbb5czLefXBlWsClJtNSf5bMxpenCKf4tm+4g7XEW9umBZwN+D8LeHr\nn/+ZmqZxP3VmV73kZbi4/cYo5UWU0qofcw2noqK+GmASVpBGMq8O1GsAbuG6\nTd9UGw+cTeg1V7R1g0PXVUD4gPJa9lf2U5oFtRlPKna4Q7CiXnao/lc6T4RZ\nv8fVon7CfxM0R9ec4zQRvpwBqCQ7LOP7v+bl/XHn6Q99K8T/8Bf+uVX0UYj0\n5USxMr/orHiv/LKlPczZ0i1T69xC9uNYVZgeWOdCbM7GZc+1P8h2DH7pK0r5\nf18j\r\n=w9Yn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICS5BNIo3p7KGGQBEMoXuz/4RdgrpOjU9PIGxQdaGWm4AiBuRi0nnOiztFaVd3EH5NayyrTtquhg0ZEZtFSjfMe7kA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.5bd58844.0_1602632794542_0.454090044594065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.bc846b29.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-ripple":"0.20.0-canary.bc846b29.0","@material/switch":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YG+eTww+YCjn4lGmXYoMyfS43/+Oe3a0oVZr5/34iKIDFzJqqOyGuXEAIGNHupMNTwJyXDCslkv7Hh+IBsRF9w==","shasum":"14f083c8d49d3f54cdf10e93cfd49580ffa26e0c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BkCRA9TVsSAnZWagAASycQAIurgMlhROHtVnvH6Ip4\nt+uyvoIxYM8Cgs/EMlJncILV/tmrDz0ahSriPP707a9AOPKPgXjEMNQhXkQA\n972xGqi50n2V6m0t8ykBsDxTkrnJHIIiGSjtT0MmfqjGxQ6bxaf+Fd14cssy\nSTqPmh/UX3x5NGpSF7xlSimwkkOgFbqrmCjxXUzpxQLKbSzSyTqUG6CZpg2p\ntDRc3pE6esICpf7nX/lTeafhkSxgq7XSmR+xeaol5YEHycIrXIsL1BKPZ/j/\nWSM5ALDd8E5UNqRmaLLBEYGv2sZQNX22QQnwv6UZK3BktaZ8YJM5C2Yp5BEA\n9GvmWINdV0DiesmPK0srXkrJ04xUanZIJ9WMjCRDbJFNV2i2yozGddhbvajY\np/CWfGjJVWtSOL0GDmEcAbRG1kAKX3mN29p0qIcdbJOZLIyiLzUcG/MfcAyJ\n06g7fFO0jaxf8zw7APNDvDcsRJGV3uaMF5cSgwHujK08z2n+ycO1+5IBHTzM\nUknvNVbgjVYKjknT/m6LQzSr3RLs8enS406OMd56de1xIOthu5MeDlh7Y6lP\nHWKyzaG/Dw6wzqWGcqFyQmNEHGxIGQZ8nvSr8ZZ+B2sbKYWzXDPsODXw5LTC\niTT+O6xtjBZF1LGa0ejnGqZlbo/ro7le4OGNZuhmgsn4MsOG9OoY7JjX3pgl\n2kzY\r\n=2Pzb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPCbBWRnGEr9/zRWzMyuPVPWstX10CVMotj26qmFtX2wIhALPd74kR90dRF/fZoB1KxZcq95zxSJbhTg//BX/QB/A8"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.bc846b29.0_1602699364173_0.6547551748091542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.3280b686.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-ripple":"0.20.0-canary.3280b686.0","@material/switch":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-rIZBpVH7wtrd62iRM77iwSXyowudM+ACk8sl1LmtYTkphdAR6d8yDADndLB/pBMdFzUh/+QEVAkfqlXcauT9QA==","shasum":"28bccaa08c1cc157f9a8acc90289b7f6af6f84d8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOaCRA9TVsSAnZWagAATWwQAIPviYA7uhQ7l4Lb6S2T\ne97BwLG02/ccY01NqmpBV5tC0vZDHJs2zHhFEyjnVhHHoesbnwZzNpH/EXyp\nxWIs6mmKBsqbEprlINbvqErpkbxGoNuXC/B8O38ax0+Mg5LXUT/VOfN3hUaL\nr+NBeuMo/bsLnrEfQjrDjy7YYaBxQtNlR7FB8+Y1GrSJohwpPw54YKrNW+Iw\njw5btf/0j4xBnNNI7x7DEdZDv6pRaQoa1L0MGguiUs0MMnTuHk0OEXl50kNy\nWHFqmzBPw9DphqUMmSdhoZno3Gwt5zDwAttNHH5TkDB9CWDiRcs/FduNDhNN\n4a7ENXiNzG0ugCfu5ImotCagRqw90eeFRyStppoaxqitkdzNbWlOia/EyILv\nhmEicYq++eymZPI2UN1uN72StEaWpgcQnX7UeEXnGV++vGDrJrHYHkf9LOHV\nD1A4zXVahnxeFoBCn2/LW/AqmrjUP6Jz0yhzPq3iLuF+NqkhZTzZQRCz1NaR\njCY5tE/e5JIf1fd+VFRDIqnMmPJVMxBOZsBsYOi79td5Iw2jxmfTayKEwqZa\nO2P2Nm+Zv1mHx1IDzvfjrZKjjinK361NkGLs0jpUO0x8uIsA5ScOQMDp5mVi\nwvks7pBMZqjfxd2Y/C3BFb/KByK8qgVwydNokVouS5NDgca1BPBk3/MkPDEe\n0Zu/\r\n=DGpM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZxfb1hlUsmvm6RGSo4GXm0jgbK0zEmlVFp2Hg7vKytwIgDvA9I4h5QOyGJJvf9AazpI5NjAU0aPhxvL2u9tpP6jI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.3280b686.0_1602806682161_0.17655029321632965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.9e94cd38.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-ripple":"0.20.0-canary.9e94cd38.0","@material/switch":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-W3y/mp6B/xI32nvvqk3D2qY5dm+eyWV/6rlaChpx51+RMXR1Rof8XzXxX6vDXPU8TyrwBfpaJ6YoMEsIbRX1gA==","shasum":"4414b1242230301d7bd1dedbc6999b8d2018dd26","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1BCRA9TVsSAnZWagAAhakP/0sBWvvwAuEEDNyZUZdr\nb1ypT6jrqMHIjLpqa0Juo+ouGQA2qCetAwAz3oEI0KtkqtM2J8Ow6skV3QMm\nfhWUv6chV7lNa5wKon5JE88P3EM6MHi4n0v8nvDp9I8FyA3XHc4H+Y3IQVUi\nuodCmOlxZ5znUjOs15rhwcUb7i8AHQ3MTMl0FnvTH7aIrGvl54rNeZiHLqWL\nSJCYk2UWLml59TGuO+2K42efn6MkJEP50ib9JrAdTSUOJWPUxKEtkDDYoXm4\nhK1GeC/N+kW5yu+fYP6aspjiiWli5eAzZ8oY78XGda9ZM21/9MHxioBpGVt3\nWh7t5LEXt68RyfUB0Dtaw7xzp3qn0raa8mNe8sTZ9S/rWVavPOtVNzQPQOlR\nsHasuPFzGTaotcJUvMjiCAeRDcmtwaiu39S5acFcdC0KZurTAjYHuqcOOHeu\nFEZekiom8sNPk3L3CesqZ2i5W4lUurorNOqkaFDH1VGHOFc3aUFYndSAiIlJ\nak0d5Du8EtAN1SCpbmV67NbQMRoLk5mjmW9rXWS+/82idLusYHkVKSV6ns6n\nvhKzfoIed4LCHWUCnOnbuZ0dU2Sh7DGjNkXAibs0q06Nsi2Yr5Lto2yrL646\nxuxywXWsUHxgIkGx5e6Y6SXoWf5tLRzE1zCOUecLLqEDwqSMvu9EOGPBOOJ0\nJOwD\r\n=suy5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtMXb9iFqaoMDGKDCg1OML5Pgod72agTHeTimCT0D0zQIgVbQgsU/estAt8mT8jfqeLqagel6zQnmZOEIZ9LmCAHo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.9e94cd38.0_1602882880753_0.31788591776652586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.4773c773.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-ripple":"0.20.0-canary.4773c773.0","@material/switch":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.2ab716cbd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Go8x3MoJzluppcX/txhoRdJtgJTcTpzFyPpjzAcTrkw5NdKzKS40iAGo7V6Dr/60ND7G461li7kbLKWCu43Bhw==","shasum":"7584ba0d16fccb0c0520b45068c3087ead7387d0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/1CRA9TVsSAnZWagAA9nQP+wZBgJ0yTOOCAHdNse4M\nMtZeGi6r6Pb1lrEnVqFELy31cKeJfk++Co/8/yQfZ1bO3HVfjsTmeMFNSkcF\nGqjo9DpVxCqDBqd8dMNikjog/D7OyjZLKhw3S5wGRSRvz5XIx2sDZljzGnup\nei2x61TDlW6Yz5Q5I739qn8vlet67wi8jHGwj7qhMFoDn/TlVniO3JGqCMwZ\ny8LavduHiZxp3hMOK8KnSxGpsIXE2OzGxr37w7PTBGzEr6XnpNK9JHDp9YH/\nl++O8lpsSnaxnsw9HwJSoeimL068pL1cdAevLyz6CAwPCflo+hubpx/YmVgN\n1rSyi03+q7mK5Dl9uA5FRJgFrwGmv5tN7JeKuuMxx8V9rqhzwxtyVDqJtksb\nSi+gPvnWGnLYZxtnq+ew/kap0Vgj/lH2dmbZl1KtRp2AGUvWxfQmUgnft0eZ\nmtB0pyG7DoVPXnjw+Bimh4PHVzoPfrRLwFVloUG/amUd7QzT8QFYwoxb91vn\nlpJod8xzoxoP/a16BXJKjSx+Mmdg2XSC3GT1q5WDnFT4uy90AMuD6bOs7lO7\neeCtHR8Z48sohsKnWzvY2jM2WIRrVUlCkG9pV+PojcPeQH33tqwEuQlkE782\n14FAWiIgMACcKO8ocODWCQjGG7g/MulBRkUsxZGVRTq59r90/kDYYKFIG3GV\nBxWX\r\n=hczG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwXPSO33QrFcD+iU/UZpMmie8iFYtq+RHjECoAg84UdwIgC4hz6ApyUwTOZH43NreKvf3ZD0R/DTMpRyFRqf6yf0M="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.4773c773.0_1602887668796_0.7874003302410517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.65787913.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-ripple":"0.20.0-canary.65787913.0","@material/switch":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QHrI8paMWxUpnHhZxvnm4izI5cX6gWkbOmmmmqR4c/5rFw/ID6iIjZEAG6T0ebKZTytmqX/DFIgiGqYHh0EQOg==","shasum":"aa59b7ff76e0e55ca138baf87f15a9c8954ab148","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAmCRA9TVsSAnZWagAAcrQP/A//ZBMyMp/cZ/7J6dH+\niBHeHaDuXjZkcd+5vSw9CgvEgxutC6tQj7FItVsDirFoFC8Udl9Pwefxyrid\nBnNHTae2fX5t1UNtQTXpZY6R4A5seDejBqgS3RK1P4Ak+eZ/zz3B2/8EUla/\nJQr1orIVoPmUTrZ2OzclS/0bhsYiVGwjmq1Is88WbUAB6gaaSxhwoK7nVp8K\n7BCvCb2ERlSGB5qyaRJJMmNK31Pb4eBWp2kxoEHFm/uG0HrIkLwB+nvRTo67\nnI9iSmIpTju1M0BSZPDE7Z39tNjyfBEtDkMUVIyNYAqA+u4n21+dxBm7VPGs\nANQMTNsdoT65SZDraaamF2Y3Yercv4EjrSWdpTT6+ti6AjPNOcFpQpLGivMw\nGiJvJg7pSzmbKFbX92pR4oQyqLCT7Ufvv2rS5ai1XekwCwzM1TWGiGf0CwIq\nRkgmaV4iWZTTtAbnvJPIJUFsNSCcU/Ic7XCTBwiCv4FbV3HmNhA4GtWbfDNq\nWVA4fs786az/EycTjb6kTM51CmgSnDgyowSi/GSfWN8SwTBoPgW9DsTfBHze\n+gsAS1i7OMqcaUylPCgc7SPNF0GyUEV56IuD2GisCauBieGwIUZXNRHZ9GtZ\nUYYHA2E4WGStEAefBoEduUPbRiJKpPlCd8bHYjicGVzzchu3dXWHJb/VOtNt\ncVGf\r\n=5r3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvkC57dwdwGsuHL8IH60S2pZvepSr7oR+rMpn3nSwR0AiEAlKvYflash/0i0uJO3NoUWXw8ytGwxq0AC2/qUiG+Tt4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.65787913.0_1603133478143_0.23582976013476098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.5485fba3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-ripple":"0.20.0-canary.5485fba3.0","@material/switch":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-hvwj6TW/5LGHstBobyD6qo/6nJaZXL1xkDo2wOveqsMmJ8TQCWO5hvJWz3NgijpU7ouHpGgqwNFXWrBfCQZ9Rg==","shasum":"f5f301fd1513f2d9137c63fb300546db2cdd1212","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQKCRA9TVsSAnZWagAAq00P/jniXtLOKcxe/wOQC0CR\nxfHsss1vzjS0qb+g1VkZ0Hc5DTuIIY9m1ZSvPm6smQgTtMwnDpuDbmXnInSe\n5qY1LxLhMSPiygS5rGrgeZJZo6tYQ9uyFyOPElNpJbVBGu4iMB84qitBDw9e\nJxgudto+NuQ+37lnKgjQAG+haJqtiu9/aKKJ4Mv3msyrsC75Emmn44sowM83\nMlOG7N2xwcAqZP21PNajKceo45Yb+9y4SNCke8ph+MzpAfoB2j/Cijfa4uY9\n9rguLXYqWImcjzP5/QbHq1wxJeENyw9KFrar9mcuwaKFC9kSHdJ379OE6unG\nRUPyfkPmcQp9YoYK9RGHtef59kHKWegLaRHK0uUQSk5/UulY/Yjddbwk1dDP\n2V3FlBYIZoW2UULuToWMGh+vPLmdqqutqUUmSNRybEw4z7gy3aUsMkNF/0Px\nnxban3+PqaiZSoyKtQAMW/aq2pMg2Fk6QhFsMwMphoq/XZiEjNvR7W1Dr/xX\nUvwm+mcsbBd9uiXdv1fJAhr6NRtD/2qKkEuBJnD2T4Q6sj2LkbtS97aX+O4l\ntRiJojVT4ave9+DjeTh5a4U2Bo2AM02H/PsUs1XyFioUC9mVK6rjzUY9QgeW\ncfES07RJMU/HY9zS22SLPx/1NNfB3gyVCFjEbspdCAR3c6TCyjOhtnS1rCM3\nJKYY\r\n=XKtG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAeIrcyF/lr2+bF23nAegxfa+DRreTCTA3TOBd8uB2siAiAwQfNc8gBcwKpr4N+oiqQAX7JyHKOfIW5TdLCTNU4pvA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.5485fba3.0_1603142666336_0.7018921061550136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.a39d0a92.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-ripple":"0.20.0-canary.a39d0a92.0","@material/switch":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Abs9uoYDnyt/opmZLNhgJZ0aD4+C3k7BelZpWSnDmXrb6mf81BXTGXwujtNNggDDgRYTd01m0NCpohx59iM7bQ==","shasum":"b0225428fee3f843cb42d9c53bd6d212c6dd2195","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0n5CRA9TVsSAnZWagAA1+sP/1qVlP1roHEQVWnj/4iZ\nWPt5U5/mcb7Jwrdqs02AggjXDw5yUaLVmQicy3Qvq3M9PiIf6GUxh51toOS5\nf9mv3brD3ucA0xgOMA71I9mtxQvX6H+Jl5GX1bf+D2FHewhsbWi7GWUTCbU9\nTIeumMh+xrvMngETgFKkh2JHZ04KZ6JATvj354WlMnDCmImFl/G40E6d4tXC\nOglDF53fdrQoDAzH7aZ2upVEoE1JAldSAQzV3dHOUcf8dR6dKpzDECRDIkbs\n7CoiMNfYEbf8RIKNGzvVCDM71fNwMupkClg7eFgxwGUSK+hhMEwYhWA165v7\nbAIM8NC0ATS21HySPqWhD3FbNsGu7r/Kd9bHMXMc8ujJ/BtxVSzy4ftFFmJU\nIIDKp/G7vMlDqd5t3sv4oUFH19TyBXZD79Xb/a1qPJR3oxsAybQihh1Oi92t\nGgbo8V5EY0Hk54bZid4yH+8Kk1vvl5caubZKGpyTSyB1udnClHN9zsM4pn4G\npHzyudNgnqTw1M+NQpwLr9rgd17I6L2C/w18IQiSgM3TCtlCmqyc9JS+BkKk\n6m39R+RMdVgI3GXmNgKKCQYYswnkh/uMuddcWYRCS0NhlNXH/iKiBeyQlC1n\nkFgHwNhe79EYpdDgE/dBYw4Tdt5brfguX9xUmJmCIJJXVc+PqwyVWDD6Sm+7\nzJYF\r\n=S6La\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvpi5puo+oTFKO9nIz4u4iq7jLD1mU5nJ80KbrXpZwzgIgaKanbosKGjf9ju9DtoA7bLBvD0eafKHypwk+FAqzeWU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.a39d0a92.0_1603488248945_0.2326700392169163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-ripple":"0.20.0-canary.4eafcbc1.0","@material/switch":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ccc64eea3.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vuqzgzI3BOfiAmCje5NoxjPOEgj92+eKxEyO+7KY81HbwWt7srWdQ5IJnh+XYceaSx3tOhsgV5iq2qeY4j6sCQ==","shasum":"aa195fc6878ebceded2ba29c93a29ee4bb162ffc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YNCRA9TVsSAnZWagAAElsP/3bU1Dxu/2fW5Znfsoky\n4TmcJgSSC6ixqzlGujPyT/FsMd6RDFV/E4HyJH5A+aKdBghyyYViXJbmVVUp\nnCuAHIWJ3C61G1likSRqlI/gksXnN+hgfQLx7AFoDwR7iqNmI/FPBAgXcCd3\ndTSk9z+nenHzDyWGwuP4K5GX3o/8EXsacJUWO7kuT5zM14aVwy4xEbNbpZhB\nQl+ynWvKrdV89uaiMoCa1R4ljfRhqyt37uNWDhwrp/BFpD3R5LvLZHVRsotw\n2g986EzDuU7p5r1BL6ezb9DfUk35qVx9FGYlr1F3G3qiuVq5l86ohoLzIWlX\nSSz21S5iofJznLEM2npjMtNT7XQl2FWgXnB9n0mQlqbregxtz0ozrmx8mwFz\nTjgtnHE7BzCo5HSTSWVgkYUUlF+sezwCy6i8bNoBedzKoEJissZKLwB72hxU\nkeLLZeMU1KZDmBbhU4HxAa/ZBlpRf4+C6jdgmfXgBYBS1narWXTFJCsCJNTF\nnJdhdJoMt/lyuDix/pdD/D4ISX1+vqbL6g4Bt6Y13IauPIMhpwDCaV+WkfzW\nnsvEfAR0TpOo7yS1d+/O3TE4VvCS+d7FDwg/xH17OrpJiXVMABZjFf2T3inH\nP3yFkmUUIuaW7bQXBzbbDwTD4fvXCj5bqYJBfDzZ8oqFT0wksTfORPBmhbmL\nJYmI\r\n=7sU0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCe/rffaL6ck86Ok8mR+l1xfY5bicIuOuALQ15KgIObsgIgKWtpnb/uCozdlVgFJknfv7UKD6mgKEaLhTxJhw6lHqY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.4eafcbc1.0_1603761677410_0.9661527843028539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.32961593.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-ripple":"0.20.0-canary.32961593.0","@material/switch":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a79cdd019.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-f6OsVGWh4hKN+HgCnf0rCVP7TY7Vv2ebI10VDm9cYOs5pG+y4Us5J3xzIwJAn2cEUXruI5EBUT9lCCe9KMaC5w==","shasum":"d8c97a34a696cb766bdfeaa66383e82a7eaa1933","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL27CRA9TVsSAnZWagAAAL8P/jsk+wXWJyXJFJM6dcqw\nl4082l8q6yoZZKWbRT2bVBOazUJLpBHYUXX/3t+7FFKkoRDHVyWZ85VcyDla\nRgbZLkr8n9odarKBhWarM9yD9x4smQPMRjnuAY76LIorI+QOtCeFUjBAmTnF\n2o/zbOOQ20UpH+BeILmWR8D7PyQZnzLqfFwYIO9hwrcbaB4bJOdiujU9QsvW\nUw8FloN8IYJFBg4nCQyX5ndMokNaSlyTkL7hdhstiuGnztOXyFww1ZyEXaoi\nI+A1rUmNfOi9Q0xA72NOVL4y28MZS5j274uj/Dp7sZaCCl18Zl8pb4LCjwMF\nK93RbWnjYSY46TtUdRTJ/XKJrnXcRi6kxNpj2B/1HzgTo7P0bWSs/yxu2/VO\nTtejgyrbQId0stUv1G1Rw+tE2KLzivliU//DA0bYZoNCj8IHZ4WRybiaXSIq\nBygl1K+agmwcoAjkbemQxW7os193XfQjNR+m68Ljn6Vpl5joIjs9rtJIsTZE\nXKebw5ay8F0aDAQ1nscyl6WIT7lKzrgBAXC5imC5nUybmgnqIAiTnbwU88fM\nV4tE3vOmZzIF58pTQyOsdNpxseHCeXN2K+GcXbeX787vI2gP3cnk06w5zgOh\nEuj2BPuOjEqpoprjnvGLY2GdhuosRHKaxq3X9bLSGDw+LWW5mBEkViHb+VwR\n0G4t\r\n=Ko2N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM7d3I9bmWPjYvvIPCKCngFsOzLx1O6upUZlBBKRYAxQIhANktptsH9SFMLQmTRkePeK7C6DwiNCmPN0qBGvVwUpa8"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.32961593.0_1603845562957_0.8905510333046427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.8e3a0601.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-ripple":"0.20.0-canary.8e3a0601.0","@material/switch":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a79cdd019.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-uFMySu91Ei9yGhUl5IES2BwAyfvxg9lYd/2F51T2r2LZYbBUCMZr+Q+z/n/FRsOumtxybDwMd4y1OTBuzdbn+g==","shasum":"2f263dc746dcb37265d4067bdcfcca31b2086b2a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYKCRA9TVsSAnZWagAA/ucP/1ZuRwc1URyoNidtOe4L\nUGCBDZAgWXT9rKvCH1Yf4NcHmzumSWteMYAEiPFP3X6nbwJop1ZrU4zJ83TO\n+4RwhDtJ43KUMX/ly2kV0K0IX61f6LbK1Io51OWXckQU9TtW04O8dYWoNK5B\njeKInmrAqWqe1j7KE1zZ8sEO8WjTnr2v0ZC81Aw29ZvpdXqnlGwd3cyyx/3W\nwe9I9HDQlMio5Voa07EvfWAxdk8j9ouAcei9E8jVh8WFcK914ZEkev1wrF+S\nd7GPm+6W5Fas5GD2HaqBxAvgdxFxgLtZNo0WCQyw83Y0zHzn2fkXhUpK0Ilr\nd4CKCYGyTMtFwogHU7T9adFS0tS2MlDb58GCfY+EABD8D0Fbx6KPhUv1nXRI\nRh08Sg2lW9Uwz5MGI7jx6Qezqy4mpdkYR2NGNLNBkRYw6G3pCbdMNdq+Zhg1\n9ZbTWXPHkSFalaKWy5ARYYB13kpkvuKclexsEwVwGovkleENK5npw4sV+P88\nqdEmpEmkc2tghIP1eSOpW0Su91k5/lXswKz4Mb04VvYgldWmGdZD+KLkSHiL\nHd0qrgishCdFyuJmMCKIdVgSCA70+8tt+f2m8giAvhFPi6n5ius52/LOmBuU\nNhXIDigdprWLSF4FCJz3JXgh8gjGNszPicoCC8BP8uu9Q0npg4zDep4jAOYV\nIR5G\r\n=rKyq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0upPiQ7qxnMp1Qhi7eYL7KhKnt6DI8MP05farYB7WvAiEA04C9++Eg9i7R217IVw18IGjzPEW3bPsq7P8HCZypXfs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.8e3a0601.0_1604007434417_0.4979765359192152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.178c25b4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-ripple":"0.20.0-canary.178c25b4.0","@material/switch":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6d9648ab2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Lv3zEjbgjuswcu+/5ycEKQ70xug+iTD7nFK71lknrcP2ijmnev2r95edv5SOubxgbK+0hp5BLWBUBVlwVp5Qzg==","shasum":"768c1f516748dbdff81da9362972e9f627a5afde","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzk9CRA9TVsSAnZWagAAMi8QAJV/QyMYSdJgrX44f9lv\ncmNwNIB3FqgQH30Lk+8iITh9C+0LyPnL8rLNJq7HauxtZI5gLvpwHP7Czs5L\nOMCYxU8J2j5HWX5C16I/TGu95LwgfJcYtFRUP6GAv8nAvDqz8/M3HLjEP0lK\n8uvZtnYx17RCyYSHXeRBJqq++Qr5ngGuXXHcx9BGJnHBwUowHzsC33SLHvDY\nFN/KT+qGgK4hrJ4lxhy8aruJvljYpFWrCJW7pdZVUwFwf/NhcePpAv2uUrc3\nj5LY67kvYZFKAxjXBdUZk1Bc4u1kd3uZz2WuiyNSnf34m7nuqTFAk2wpgU5y\n+eloJW+WPbb0OqpmMvfLrzub6J2hq8dCcVIZm0uM/IGyQuVx8zMGUb7G3ysy\ncp8kJunmVThuV2MtlNmKM9aaHRkPha4OeYBQgcPFjdSfR5fd8eKZz0PzWY60\n6xhb7xnmjmsDI/GHMzGA4sJ56TCC9MssuIBMkV0T5okvv2oDr5gBeSdj4jmh\no1zIybPMRosuUjLUbgGwIVSZGjMCt3tvLiVui9JDwr7myiZdSFKoVHoAY4hN\nKs1QmOTnqmxftbXOcngTXJLG6AXQykqe5cELddggA2hxBursYLlT7cN6DadW\nV/guq9CdaS4Ij+NISSKzyWxTGnYqg3aUJyvkhzLIrHBoS+mAhrolDMhEzOyu\nnmT8\r\n=b/Z9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/NXNqhyuLGboSWDoaAI/dGKYN6FqY/NktEDa9DhHfeAiEAn9M1kwAi6JtqRqGvE/KD07Xidvkqa29a+3+RN2Hzt9A="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.178c25b4.0_1604008253524_0.8847044927508667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.124beb49.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-ripple":"0.20.0-canary.124beb49.0","@material/switch":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6d9648ab2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QqMQnwvvpYlLPCamWR5YJBx4bPWHB+s6T4N8kouqFAoj3kwXsbyWNsNKiCS82WsCnN0Ruejlk+eqBv2ADiKmcw==","shasum":"241c51699e3baa17fc6befb27f8affe76841e73b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqaCRA9TVsSAnZWagAAWM0QAI9IUA8G/kKJ7REOBZ0t\n1wjfXMQ15DO1/qxSd9rMdAa7KdXnM3W9PURfywB/7G90ivvftsFId82hTm17\n0Bk/bWcmqXg0BrQqyZJjPAJtDPtSsPeJus0NO13PmIiCdcdwdyLC7UAPLgL2\nmkyGvVQq+NTFUFB4yvdA02RS55/lN/F/Qf9+EsILa2umMHkE2b5flhaHq638\nyG4Ywh2LOs6tnoQUu+f8aycFmLsDPPs4duqoLBZAVsawyYkCyGy2s35wm8kV\nfc6PdByyOfzDJBlionwzhvD+6RuFKW2CZ+ZOhfHwkpLFpvz9ireljRg+NGDP\nENNyUSUD7WCa/gU8y701Mdpnc/b1Mleq9FPYApooapcoqNm1vJ0JuhO3tHVU\nRm7ajYNZgG5LEpT0PZWqznNWS8QVvYfztvlQUamKLBdSKtRO9ppyLJayBrC2\n3coiZHqN89D9yNqkO4WGFBRShaYuR+XpNJ8scwdUjGUwTrTq6RsIMANPw+1I\n+6oDEcWD1qba/LP1CJn4/BHGAmjBu5P1lrYs5aBlL+g5JtyLMq51U92fGR3y\ncjigFAQkWxQC96lyWlPIsaOPeMJfsR66F36wBcC8L2lxDBA7HWVf7MZvWC5Q\nFrGrQRcrWSCgJxEWs0C7+aU5g5p5b8abV82Yh2BPvfPTWkfeOuGXuIe2s0mg\nQVKU\r\n=u95o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEFRwB+RcWsMGQFygQeluzOlb9sutY5CyCK9cHbJ1vDAIgZmKA0fEpE5btp/CIQzoVXImvxmjlehveIM3srTeu4Yg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.124beb49.0_1604102810087_0.7970488952473354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.5937f468.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-ripple":"0.20.0-canary.5937f468.0","@material/switch":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.d6b5cd418.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XLNrtCMeuosk2A+7viCm1W7Sxa80rwuPNJbNtl2DOd83H6VFf+ZRx+bAF5iQiMjBenQ4IY+D5Dff0s39QF1jcA==","shasum":"f5f8b236f8e4234e36dd0f674480078da5fc2c5a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfCCRA9TVsSAnZWagAAO7cQAJaJ2ikC/7kHp8MxvBi2\niu0qsne34lNpnuSst2swCgP8/OwK0QXx6boBW+f/kP+EEbJQB/m1m/FN1cOa\nL1rhTN6N/eBP3EVTDcqnfETK71GAcOmazh7GKwCF9K2HtQGB1xi6Q/4NOUbC\nei1go3K6vhS1XbQGilS3P/V/RrOw0ftXoEy/ddEGK9aH8CqRbBFy5gxJE7I8\ng2xtwikalbnhTpmOJNz7q29TwoESgHwoQywnq55vyk8+SZ+FhG26r1+ZIrVn\nTy7oZcFNfKYOrdivaSsxs77N7ft00V+c+lzKkYzMRIVlFY40VwESw10h77H2\ncHbBOek2HAnmVNclQ70IddylxwauWpqVOnH79PHURMrprVVIxsiNn1xR2e8j\nQ4slmzNLs91pSbgVhDqb0XsDuQQsXsb94wu5mahnK3ldgAMqQb/lbUFRO11z\n12qEB/fRaMEQQOxQGr0LWDdu/ZS4vPTiSqj1ZCNdlCTl7WX6vHLuUEr4bGND\nrY1BNz3vb0kXjvPHPKdrLkO2n0vkHlbAtL1D/Heq7W8fQsLM4U/E+0IJzBWp\nvvqkLSyJE6V75h8FDyQXJmPU/aXBjcnRT8LEuOcHuAMf/ec6Pa30CXF5IOY8\nbm3/adtJKiJ27IoVgXAet1rkvHm8qwDCRO+tVF+dAx51CUuM2FKoyas8Zw3P\nGDyG\r\n=YIox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3ShkO6gQnJjxT7Vf2HqZKRZawxjQ2j6zWZBoPYaA+0AiAtHnOOwSkjOK461DSCV4lQFCA5Iu08zNTHamfK6jJ32w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.5937f468.0_1604523970256_0.21727551414596658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.a9bafaee.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-ripple":"0.20.0-canary.a9bafaee.0","@material/switch":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.d6b5cd418.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EZZhP9zysPbQB59YFZZQIeeuDZ6unu55IOlzR0eoulstgVM1E8qZcd8kBWn9+0cXuX1DrtnTsSIIhQElf4hx7w==","shasum":"144db5f0d0fb57d3e71c40362069eac3324c0bc5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0nCRA9TVsSAnZWagAAm2QP/iW74odMoNTWbHjOg/FA\nxKQdwEaU39f9mD+EAPSjozU7p/PoS/5r5LL8/Q0pJWIlaROgzJAr9azcortW\ncNGCabWLHsGADhgPQ8aQg9rOkdjwuwbcQegJAk5DXEZKmVVmbLB5rzglLR2E\nsiXpYiH4hubrTgRcjyMYSsTlveZmh0R05Xd8bkRygorzzqEqad39bmJWrtIT\nQDTL0iR2X+M4zWLRyIKLpYLleR8ukBAgh/TLT4zohymrYw50vvJA7kGgrEEx\nwrbwYGHrIvaKRc1Hzy6qwS8TT9YuCPnnxPwLlr9Veme6xABZKy0ygb8trEgj\nEZK1063S8iuPDP6keCvtANeQCZsb/xUTG7mfIJUYQOCSoTPxFMIXtjzZTAIG\ncb2d4XuNf5Uq7TPxNWC/P9bf5HJw5wbeOQu8lzvVfHbV1VXeJ7JnFDXSERqb\n/pZSSQv1B0e+dKmHkw2MinXt8wQHTI8GzQ27irH9Spq6AtqEY8iUFr20JQL2\nIZDk3fAydXtQt5Ct/brTY0AbfBvUflhEy/ocSFkyJ3VyFN/GoXQFMv3RM2hS\npT39h9UDOJzqqccKcLzPC4cwIYVnT+mPx7xqbQ2eWl2/1fjt5zcSgdAuHIcM\nghcZp+jplMncXRiP0xXS3CxlsAiqUmUPQgrSVg9Csw08kERR7wUa5tvkrSeu\nKitR\r\n=VfUB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCljG3TZ6utdM5brB9ZlzLsqGvI9c8Dnz4bQ1ctlL+PNwIgNgQ1iAhQufcqmkJOQD/UQ9KHYo5Qx+3/LKgo8DB1EMg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.a9bafaee.0_1604615463360_0.7344953497090914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.184861ee.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-ripple":"0.20.0-canary.184861ee.0","@material/switch":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-S9X/Y4eFFegDkB+lxPim78VU8j3k3qgJvy7G7YySuGvXuOytsoW6NpyxFZVwMk6bAfIxRMtB2ZFY4G5Iz2QzMg==","shasum":"ae206b33f4f2599bea848d3afd520b6936cbe73a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexoCRA9TVsSAnZWagAAND8P/0RxFThbKK2aHB1ZsvPg\nE1mTUzPf0xcAlwd2J8Wa1lQl+I5XxTxk8e5MBk1QkeAX16aRT3fFMPz1Yg0z\n5xjsSjPs+jo4lW5jtbVXyZ1iRUwCU6awqAFCtHiAdhCDBG9DeQBHSREp1YX6\n08ZO9VnPk6OcxAlb8UWEZXmL8ZX742O/blh4a8g6wCRGmHjBazp+nyJMlpDa\nEbeRyZf7CdK17m0c1DjvLmEX/qiZUOkWQalt6+GhhF0+yY6/5AfPgl4PXPHh\nyvy2ViyIOsAJeu7gsUbwN3vL113OHE7XgfineFuplsvE4S7QDFFuttg0hJhX\n56iMxM5xkdLZmCaKblNkgf9y+q4F0Mb9WfAnbQAg15aKCFcdT13WaWS5voiG\nFiS7wk/D2KnhEpHyMYRg8ycfvMcNMnm47Td3jJOZlMROWQ35yBPIezRoF4Kr\nabfZA0Dg9NhuXP0HiuqPRfcQHTx4eODyPqHkR6KE9rfDR3LXbIgnfvAB4fIL\nDGsOIGvW9em4Tbzhr+BRZtopRSzb79jlC7DvpRQg67bTxawAQAyOnKQRSQRa\nDkR1vqOaq2QNKjLNOZN2lTHTU14aU4RMXmKfXhNg0tQ6kM8u+b4EMF3rtRwk\nqrlPjk6yh5fOzNFeA++nJo9T33BkLm7rGGU6tAgOVhZZUuB2+FJQS8BlplWR\nM37+\r\n=IY3C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUfeGRUkujqD4CULmYUmq88qyHPN/p85YzrN/lbfnMhAIgQOdGvM4v1lKvR1U3aw4/r6YWA+bKkBYJXaReqU/18HU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.184861ee.0_1604709479579_0.8704621879001315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-ripple":"0.20.0-canary.6c6ae2d6.0","@material/switch":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-r2VTwxxWhud5yRZH1vGaESFx2jBnEpwdEQ9u/9ynX52HbStJtgzDheRYSKbnauUQyl/QZ5Qa5BrJ+ogVfDTfHA==","shasum":"db49b7a6af340399b5503328229711f9a3f5c2f5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7CCRA9TVsSAnZWagAADwsP+wSnoY9M3KwaY3GO9GTr\nxBN7Znbf1bX7A98KCjqTEXhElpWwxmJabLI5N3iwohjLj8qpZ178V3Vb4XAI\npKg/8o8RfDEr+60C65oX7RsRaOTmha9m+nDsoXR05eRj37vVXj+nzvRE9EbH\nSk6mCtFgXbOBVt0h4SI9T7X487NKEQ4P9ji7bXsYNfbJYuIC9e+31NtkZbo5\n2Lie6IGLCyLsRaXK5oiSLYpfXNat6PdDpC4lqdYdGg1aesD6Ti43DX0v1C/U\nPSZ/IKXHsFsd4MQVcrS3RpRD1THRAkadIzqCI1ZdHAVpuq4XzuUYfnJFwaV1\nXqIcdbESdAHm70qWSKJUtdoE252QefWFKxhSGkbC1C2nLtVObtPihJhGZDcs\nFpSs2JPUJCwWr9tDkszzWMFWF/xl5U2aqe8jfDFLWvrUInAppJ67mU0GzROU\nx16EcElixn6rE29fpsg5dobnixJS1SXkx5EQIK4WdEnq4NVSaJQtkLn1BoSs\nHTQF3bc5kWGGdMLRZDJ4q8JpvQLwjCbT3ufstGGOC5zLNccShLFfvEGxB7II\nuynOSaqUxLLBT9GGprbH47vib7nxF5oGlxntsId1H0pPHYTOC7ocicKHmr1o\nhSJacJUuRzR5SP3JWiR2uZdHbhQsErvMW8YpTy39229VuOCyR35RsVHsJHHf\nrhgH\r\n=5YZR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8ZbecHMhB2S0z0r+GSjzD0XrannQvZopcBA+aN5SoiAiEAmd58JbLALtNS231jpzSm8XOzTEn6MMz/zOmgzdtDZRQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.6c6ae2d6.0_1604927170466_0.20244620843941052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.ea2aa477.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-ripple":"0.20.0-canary.ea2aa477.0","@material/switch":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-d5mMM402r7Pnjhcvg/akRFxRm+7Vb+z12N5Yo96PaDYQaPTiK6O1D9wnmKFwAfQr7Gj8Pu1oBX2YpV3zPIx2BA==","shasum":"7317e411723c5776550bd7e77b578f28088aa22e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdeVCRA9TVsSAnZWagAAlHcP/0vTVgOGhJW96UFD6kWD\nWWSwqRMgxS6jGE93iSZae/GoAtlPJzp8743MqLQhZsoK1nursOvw83wMNtbq\nT3HhZNYoVDW9R8X3wUFNsf7a6XbuHfFcB2PCqFnBJ8+X9hBwcD3IZAoVZzVQ\nj9N+MFoxZE5YBxWVQk417KdXKEmwoGeqvpy6Tm5lAhaYkDA4ZDR7lL5Gpxx6\nl9cOXDft3WlQi+oLx8L74+nkqKM6wNwNzBz+WhgzQPjRBQUAxccaQZqBWH7r\nFGHFMHomwlAPN8Sjallyn/Lmvt30Qweh/tcsh2HGyqze14CtQTjICdq3LPWU\nDU2MCh09453SrA1Dc0VVUlAsNND76h1tJX5sR2/pLLr3/qDIPDoxeCwj/Ljn\nNctjxhdUKW30iMLx9GbBAhjXLv11T/ccO3HU7HJk8+i1ZMxapHNX36ct8UOm\nTNBkC8xlBNpnbDEIt71vHHllvMw7deUbAV32JsWmAfWVVWgArbNIv7dBmi0a\nqsE6AR78W6FNeiFbqXEwiRAflmb5A2YPcoAR36CCtMmBPBYb7Dw4N34syr0o\n2j+aAKmmVOZ/UJaql4ckm9AQ3vFucGkzRSD7zApP/WTXx7WsyBJRrarnnfey\ntqbmWM3sCcgikevqQwGzK8I5YAh3ql5mU6i7fWQOJkinTzHX8hyLdN+XicKs\nV+NB\r\n=Vo/3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOXkXatsN/FgnQeG+1Hfa+pmYCV70Qxva7fiwx2UG3uAIgK24uc7tkIRY4eA3a+V7oyTqYtAFKdWwVdfj5IePqkck="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.ea2aa477.0_1604966293155_0.4535242270200268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.a2c088dc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-ripple":"0.20.0-canary.a2c088dc.0","@material/switch":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WX7KCLBCwwnpORfcD+Pw2+XVVNpmF48vTWaDClRuWf6NJTR+80l4F7q9P+Xym83TlONNsacm6/g6P1wGY28Yig==","shasum":"e07828be9b2f410a77051940274998d9cd5dd2c4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKVCRA9TVsSAnZWagAARD0P/3oOfILczyMsvREuAoEg\nT2gjqwccWIfd4vt4q2rqTWjQ17bqo+i6nzWOoUMtsW4Kvn+7kiMhSof99bW6\nhvkQ7I7ECVnMPL7xnGaR54W//Q4vqoc17lfz24HzkGQ411OeYouhLsGwFjPr\nBEsSAg6Nidl5YcR8UXtY4q+4/87zz/wuJmMY3TRKEGeP281ufcgHKZVTkTFg\nQ37l9OXFYx/9TxiY6D76nEo2Red85xd52Wdl4m5G4BZbeZimxAmOWe47sR18\n97l5mK1tiV25wZURJ7s63ovOYtMmqZiK3X2A7eVgEVK3kWVMvQ9Re4a1LQ2b\n2uh4uY3tO2TL0E7DCCZDnTwyx5o7cB8gjJ1SaiGetzCkpTR16o9astHZKMzY\n4B0AxQ1QSqv58MBerMHjYro/bivdE6UcbFeo0vgfeAG4k/DkLOZrEEE+/LOr\ncCNAkCatCKNRx5m8FVM/CzRvs8RDSSOu/W9fFKRklclmYDQw4qONDJVPXQVF\nnRaYvgmbMJ53Kz+DhfLxhI9et5fmxwJFEFeY04v8ZSWytP/00O6PPKUGAwKv\nA8WYZ9Ql570wG5kBxRRWgH8RSAsZi7mhSFDBFOCxP7Qor/gwA68a4+XzSzN/\nLMGP8P90Bf0jATk7yHb8LSHCFL702X9I2rGJgokVW2KebfjghK1oPkoH6xrI\nJDiR\r\n=VeN7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVDtnKTI0jWEVu4RWq9f2EnPVF1jnZe1Unu+gXWEA7SAIhANixcfyyHvjEBlaa59w3N0/bqtH0h5gKWgQsZLknjZlM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.a2c088dc.0_1605018261027_0.5993124413589737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.b04d71d4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-ripple":"0.20.0-canary.b04d71d4.0","@material/switch":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Yt5MCoAdqhtzfymzsOjk4gdLlSwgvsNi16QdUhbD/P5i9qvk9f4MkZPEtL1QfDNHhNgYIcOmI+khaJ/dz1NxMA==","shasum":"d4f6976982d9a9ce666e3799191e57e04b9ae920","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":43018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGKCRA9TVsSAnZWagAAKPMP/Ai+NgDCJLBo5jL279Rp\nPWBLqZP/NutKfVT1AnaYP3s66hhx045a/U74V7P9Xf//TAg1rpbpdmaLMcRz\nxuGytI2SkybshVtlL5UMf094vVzgZ5/s1RvylTXuTh4jph2LZXDR6YHgvMHX\nOcvWNq48sxUxdcoSVB7cAr/KPBttdZObQfbuU5FyHmsMBLDDAKbR51M8CMNV\nXncAc4G5bnyLXabe5kcZ9MmiaXrKwAWA83DMLiQ3ark0nF36nngOTpYVZlVk\nVf60MseqhLTYaUr/cexAj7sKL+7PaPCSHbVdN9D318PLz76I3F5Ope/yGdal\nLgxUg9w8gL+LwWAIJcJeHt+z9I28feGaxxH+2CMZBylA9gRIX3TtRsSeFoge\ngWf4r7DxpZKNL9WN5oiMET/UWzPOyVB+ArAKHvtDMQ+zY9wE4LDU6aPitmBg\n9/gW0EMUBeFWghkDMOJReekqMt/ToFVU1h2xrKH9MhqE16YrQfpfC3VEEE6P\nnVKYXcnMoXyBSvXCalKfFtJBmnMi/3EehMYaaCntn4jA3jkHB+/7vzetVzWW\nI7ef/h/pwxX0Bs2sXI5KaDhj18/Mz8g50rlYycUaxvN/fJUVP4rKzt4kQ7pj\nK5VPxv7aZ6EworyolrRBOTd/lk+LTos5D/Xju5Mr3+BykB7AVC2lGIUKqFao\nreQ3\r\n=xCyc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFmliGgy9/KUaHOOdEjpTIQYQ7aZw3HRY30NW7pEmnxQIhAKdsYPGxyuSZYb0Lbye1IGMSokL/33PneDTPwqIqAchg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.b04d71d4.0_1605177737952_0.8676553050478659"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.2c553352.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-ripple":"0.20.0-canary.2c553352.0","@material/switch":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-H31u7qtjLWmfAmujysFr8/dJ5z4T6jTNo4Rb12toLzVAVbAjOA4ekSqL3GbFbmuy5VHJouPoBQALu300sjl2yQ==","shasum":"09cda98e0ae8ea7696afe214ccf59502cadf5ee8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbp0CRA9TVsSAnZWagAAFJ8P/3cBMMQ1OEUWKV/htAcY\nMs21IEgayS0QctJrNSh59/B+Ft4fFI2Pp536mqWRvIGPnUybq5AOVb8+sd+j\n9knegMhfT2SrSo6xti35gm0bul+GwwAgKAT5xZsDb207EffNbxLBp9EEsLgi\n08NB46LUd1nLzeSg31Njw2BkXgwO6wDgt8Z30XnHhNoLVbWqGcdZqMUHcB0E\n2/+ymsgbFTr1KVAc6FO2SM+W6XO27OUZJD+jDEz0w9hG6PXXXTnxkAXDD+mr\ngStPI66fWJ4s1SWfwBnhsT/DDXH518pXcMvf/OFEFoJ1l1bweiPvPCShh3cw\n4v5pw469p26+uDKmHT2buLk0sS09DOYiPT8awVmoDkjb9QYbM95Jcfl+9AdZ\nAeghtlyeEHW49MdlFM0eSAW2TvfVNdNfk1qEl7sazw4Ov3OvB1pDkfzRsPE8\nS1TCvL4Fx2yq82C5cnkssXV5Yfwwo2xzXHgfNUYIc8YEewnuwZqK0BUp5sqq\nJgjGw1/rhqCz8JvF061ZfteRNkbCslxh5IeX8zBQmMa3BozOEB4sJnJ2bvOm\nMw7/9QMzAtfMf/tN1KbocIKVwn0gEwcSH4dggGFLj5mPhMZMNrzWNr04m9XT\nd4zfLL9JC27+8sose3Llmmn1+Wj39ZURZlBFog4xLF8Srh/tVyzo3R1qN0UP\n4VXB\r\n=ZvPM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWPpec+KyV9EclBrhrk4UULbKSDM7CLQdFLeTfTRnUPAiBFu1IeKo7UQeVmT+qjqhe2/ZQbW+CoEhXSAntqFTXhGQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.2c553352.0_1605220979846_0.39884934501968616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.6560d19a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-ripple":"0.20.0-canary.6560d19a.0","@material/switch":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7oVHWvR0pFXKMVWSIIs1iRUj5WHEPRgKFFingUNusJRxvTBxtjl4aDmWudl3dRfO3nDpHW7TOHJzFvukkq7Pcg==","shasum":"a71c7a69524e0fbee8b1d80286103b0296f28354","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEqCRA9TVsSAnZWagAAUI8QAI8OFYAreebEdmLHoH8v\nkzNZ6u8cSXOijQwelGE/7Uud5RkvS7LgPg7vU1CgVg9X/tVdoHuTsqGZuJNd\nO5J57d4E45jI+lhGh/f4/CHUgS11jYF6TyNsVThHoBqViwsDy4Yu2PltQeXX\nWYdQ/CNuwWMNl0f0HKpzdPYdsNRY8VdLlaEd2cfT3ZHjY5qdJTf+2gT02Afp\nZ+9XxNGtXYVrazCjHIJZ0cGoCg2jMD8pA+nAbbxK2BPPmp/KkwTuq6AoOJq6\n7rnnEJFsS0JVbFSbhObjI5SuxsuaDO0H7cjz5aN/kozDHbtPhzL6MD5u4NoQ\nf2EfaSqRZnyAtxH3rxypIR7i0VrFmVcHTae9jmMw0F1SlutjsF4eE8fCvBfF\n0hLDoDxBGlFGC0v2RhAdUFGnQKnvdhv5p53+xnURYdEhI8CJOWQ3Y/LulmDO\nN5pHKT95ujrTmQfuI/mXPqN0ft0sYYbvY4qrcZKJ7Dzbg7ha/fawGMH6dhWC\nUNM+7ifAFi9pcNX6uoenb5bskKeTCn7kyoei6x6bjSYZWH4QD22RHDmvWgtU\n/PuNHBntm5FUKMnJvARu5BtRwAN8ELuZl4WPmoPqX0PkAqaqGy7LAwg0ZGa7\n2MOZYs6Tfl7jk3+sS5vD0KkmA0btQgzI7Aphp0s9t/zdpf+AWMCh7MLFC8H+\nZke3\r\n=V5Qx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJwPEz4bPJk2q33hM0iZpBGhVDxh5cSTpmx+Xbdi/DaQIgSZZ174Fmo+h7M6tZoA4dpkCWyY78IeGN7dV73PMAxUE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.6560d19a.0_1605300521804_0.04751795594906594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-ripple":"0.20.0-canary.a28d5ec3.0","@material/switch":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-eFTMRbSxxVeA6ToMW8o5E3oI9Kqm4/UHDVtmMFYIwlsMVaC7qUSZyCXJHcsQVoXhbKnfmgG8XTAJI10fD/ftzg==","shasum":"0523bc9906f3a81e339328fee2545c6a53f3f28e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+siCRA9TVsSAnZWagAAcCcQAI7jsW2tGlST0TNYjXcn\nG6IojkcrJ6JHGdtO017f1jqD1G2gCdXFYAkEdVRORRfZGarAJ9ymG9dAmaCY\nasdVI/KwouQ+LYs57YelS09fVDj5Ygwh9xJB/MBGe4POyUmb2+e7PB+eq+kp\n4IeMZfKfqZAzvhI2NmghLkn0jgzBJiCZBySmuOcMsUQ+fVrNbu71s9F3p4FD\nTNJfYSE20auwc6PEQ7FXPpQW75n6pVNjHACjxHiL06cvmYzJrnfvN4ZFucA3\nLRwIFscQt2X2TjYSW9Y8IGyfFkmP9xe/PUZoaDgY8FObI7IlpsD1rU/xOFVG\nMZKZbAJTYDMTIOg0t4QMxfbgeijYS2BDCvRFU4Fg87H/N7ff0mPIfEn16eyS\ntzvrbrb5k7GTRBuQ82CbMp9XqDCRW6eSA3TVdpZxg/8pHPzN6f0eiGMjTYv/\nVO1lZknLRlVvGJ2brUYp++WDw+FtIEmYvH2B7NeISmgAzXNcoJcqTYxLUFiv\ndqxweV+GzKysUN5YzEKmQOrrm2uY3t0qu8wWK8ZL6ZA6fXDKYv/e0/fzVJmP\n84aDq6SFmUtnDaWFOXrc6FpLKogTKSsBk8Cy6eTQXtXU62b2KlkVD7ENcTiF\n4czz5Y+WyFK2z5DCCtOZCWif3E0doYyrBN56b9fwfXvd3cc1YvSghfLjy+jN\nJ46N\r\n=9bfd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBf94JyyFrytk4bKLu5PJa84LhGKONMW3llujQdzjVD6AiEAwISbAd64jkf7EHLeBnw3AtWm5j7iWcgDFT64ts64Ufo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.a28d5ec3.0_1605626657519_0.6469425981727703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.03e7e778.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-ripple":"0.20.0-canary.03e7e778.0","@material/switch":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wMnmza98cqQU74U1EunL2vnCIRviQHGr1oUQWgxpdFfpROZV+/E2130RrYhIr5M0bBna9cakQva//OMUXYGPaQ==","shasum":"a0068e2eff16b0e3293e7a2364f5e34543e28ff5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCPrCRA9TVsSAnZWagAAkP4P/idPmch3aR8h9IcfiGA9\nR6I6K47unoF1alRAajDERfsMkqfvMt+a8N2t/ipRfhbPu2r4+5ibhA3Pb++q\nYgwZ5+FMR410s+bSaflSrKNpT3EQHdByXBB5c33FthteBF0W7LB6T+hLZi5z\nUPEHOpycEvUOUTGaiT2xFxLVJQ7l4ZesCqOlJi73QnFHKdRUhMd0Hp68QlCU\nuW+ynV3fuHlvaUNgmlzF062KUq9IIwMlqfY50iUPidlLZJuVqr5lOXH9MV/Z\nvi8OJizf799Y2wpOrt8dLBM2Htwtyl7+wdPZFTg18nsuxRedvKnLfczekeZt\n7Y3GrWFG+8NzdnHZADWGapfCsXYX761FDJCHa6zHdnDNNEyOXipuk1wB16IM\nPT2AF6x7tYpzUwbTlPmJdBDJ4IQC/iYrwh6cWw8gKUHLqKrkvvW5RJwgb0/d\n8B59vobVWTkRv6WNv1T58eM8jF8ixnl/BjxcszyicNvMcPnUUZgpb7MSiFKV\nh0EPv9RVMnXOchArhG4Ko+oZj0Ncrsz1qoXuKKszUxuIjfVx6e7Pl8aUV+XI\nU6OEYnuTDAlfbdfpOpFnecc1bathnTag452ohTjdzfh+XHFeeGWyOmyuD/Ae\nnvb4Kaab8KrYZcnXNs7KH+GixOpdlFiVb6f88qTTUxyLqxZwjrNrt7zXSUHD\njgaO\r\n=NUI8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0S/B97DMUsbxK5uEwcA8V9ah3Ku6EWuizVEZTmFQm5AiEAvFvFplvchwhTtoqFPkQga3evt7SW1lXrt3UBKuvaDmY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.03e7e778.0_1605641195556_0.38745044675199747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.ac8ed597.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-ripple":"0.20.0-canary.ac8ed597.0","@material/switch":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mHm6Vwja15CDVgf77LveZjCAONAbLnTnUeBqS9Zugn/1H6zm1nP5zRC+QgGOSyk901+jCgOMhDc+5BFwbXXbzQ==","shasum":"3a1f1ec12877440d40e9cfea8aaa17bf7b0a310c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEq0CRA9TVsSAnZWagAA1VkQAJATL/pQiru7f0eVj1HU\nJtldR5jcc+QUpd1/K5gLX5PBf0LBzmSCbTbQD6QSed0XUWpgtERP5inuEwGC\n7bG7Z4UhTK5Klq1m3ScNRuLio66xVj4KyE77kdLhoAHWzK30+iaoB7aR8Q7v\nHwtQP+2eBbQEgI1Znv6zS9kAWySRYwHloZz5E4XlgRwUG6IovdZAR/rvmWDZ\ngpQCZwkzh2TrhwWCYaixgV/zeWra4YA4ybeBm1mnKO7x6YpgkkTI+YCC0JQV\nMUhKFKEYpJFpPGF2JzMBLOfO2p4Ktvppmm0iSkhjTGx/kRt4AkUjrCXUNV/n\nGzzV0H+CO4A5eb9MYRstpt7FpYJJVxvxAPrsgkZgwBfxebvazjncZjPbDCnO\nggW57BopjjUDTXRyzeR8iG5yK8eqYdlbfzxrH8L1ekZHtRuj2PWlLE6hy2sE\n5zA0U+QHYSVwQtPQHAxJlS50P7/xYVcRHHNq3B7Nlc9MXcQ3zbJFyplCXuB0\nbo58g2nDgpeH1nVZSlha44SaCs5hjQ9ArMj2o/f98eskp9Ejfb1s1g3/Usvq\nxAeidS0M051DSLRtMCGh9ySTnOktVEsUZv8Stvx8S76xCExlom30B3eHo8ND\nNK8XP1WUM8AZT30POuDRyZHgzcUMp6xrskX6TmNQ/J8eBq6FyauhgmUYr96F\nWvoI\r\n=9DjC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrNHAI1LkhIIsjwGMQ6FYH1+tvIkSguWqG9/yFe/BAfgIgMXn6LP6G7rS2d2o930GCMb0Xs7IEndOnY5E5zxHwRlw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.ac8ed597.0_1605651124105_0.9324012741357468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.b6a60f60.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-ripple":"0.20.0-canary.b6a60f60.0","@material/switch":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CNpL0EGDVZDxJJufgLaBqQBFnw7AfeIpVaLaV6dY4825Y5A5YNIyHqr8bGdtCiPcFvfSc8YvSnAujaL80F/R+Q==","shasum":"020d41c444c2ebd4b01b7ca2b93eb70da8324b63","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQqCRA9TVsSAnZWagAAOKgP/j3yNq0tmwiqHIOOqyRK\nLMMWHuw9WZLojv1DHDOCHxQmMW5ZZdEIHu8XsjAfZjvcbUPkAIo3ahx68Mq/\nUlm9RTLQqrQKvPdUZIxkOIMegmwpJVZgz6KUliqLaUm+gVeVw2u9a/94hCz0\nPtfjAv+h43tyhilVQW+/aTyrWxlgYk4d3S+tjYdog6VM1aPBsVVU8oaaQuE9\nyDH/kSvY9GGxKnMeCHHAw5w8RILsxBNHU68QTaJtYY1+Dmi7ymRGV4fOQXPr\n3pEZnS6AIWIZupSqxKSKsRTyVgFga/SblVsPnHLKblMMFFT0UxBKPI1JVzBz\n6YPMLC04OKiHa+BD+DnL6RAqIdZNa0Hc8tKmmNEyvFzDHCb0yWvdoc2PlQAB\n18YewDeLEjThHdBcb1aKKOMG03Bz3HAE5qlIvqGz3ZCU0ByXnk5yj6zrncVW\nCotJzOjNfcnzfpVTJ2LZtWGeAKb/V4IAF3bq71eBmF+Qb1oZTHsdJesQt6I8\nzormW6lMmUR9OIpautBNYIJrEWoi7ufmZevUF90g6B8+6mSyPdy4FEJtfGBV\ndByxG6N2Cdq4jfxVMH4tiDXFAV3isiX4yieASiTwfdy1YeARfmeIup73haAu\nUtrZsVbxL8uARPDrlWxUX4WcAvuEKVrrtIl1+5Tx1Cl46MHvA5umdNHkPh0J\nZqxZ\r\n=r3Am\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzNsbZT4MB4k/kfF96peywaPJLQmQduAboHEcYDpIIagIhANE0K91QjpOp9qSI0u/C+spJJartPqEB67BvGQtcQx17"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.b6a60f60.0_1605653546139_0.8500217202622795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.71cc24fb.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-ripple":"0.20.0-canary.71cc24fb.0","@material/switch":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jfocSAZsdMX/bcnANX9KJYnrwFj0aWEBUDwLxeRfWlVllrFWixpZJf1oPbG1G3Oda3gFnne3Yt4ngTglI26ZCA==","shasum":"cd8332eeec497fc0698eecb77869e4474d01ba6a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnrCRA9TVsSAnZWagAACUYP/0hafQSBXX+UzS5/mNHU\n/z4bmqw8g9ct7Jc4tkinI/8S7HUHuPIh82KCb0aBQ0RMWUh9SkECweAhXBW3\nboJa0iuXzvuih9zVGHZw2Wy3UmqjDmtD5xoY5J5ThZPjajBmQjLA5nuTx/Np\nxo1wnWXiL6s1dgZG9kgAQQ8oEYPdIurldmxehGlzUvF0qR0HVksMN7WZzmDE\nKhRQu7n//Napg7qDuUwVc4jiJVcPqd9BHgRbaQHP812V8JNpgAaX7gMd0nIU\nJL27zBqybKzcxC+UK6Mjdyx1rieCDO8YZN1u6pKTY/mNwpKq2WhJUlGTdCvF\nbMvimSI/CrZG0gWEDSsjvbQEqxetXxfRs+eVcoaPPMLvpkfr1q4Js5ZlZR6Z\nERK377aZTLkbaBo5TU4yAewXaIYbZpMo5YSYArksukLnwFRSKsm9hie2YOMT\n99oPEu2YWg+TLpRu9Fu2Y5Dh/19EhKe6hXZuowNxCmHaVKQNU9/ZIQhNKpSA\n8Vf4LSlfvfrr2q2UXOojIUl/UvRaGvmRhsiquGce/uZNlGQVhuwAxvpvpzw/\nl+2KBiiUDERaBtlvryyMGj8aky48PIsZzt6Iw5blozdchTPwb7I6S2CcS3A1\nqjqhIQh9SegGsQl5prqrICaDEIHAWRzIuKlTIu0CCZMdRUOEng+mzEkNj+HD\n1RwI\r\n=70QW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVXulM8Q2iO69U5vhBbvAuLyvFpK+CguGO4ttD8f7KwwIgQbvErb4gI68HZJKwxju36xC4rtrOCoWpfYsArK72lJQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.71cc24fb.0_1605655018654_0.4640800007802388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.761027ff.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-ripple":"0.20.0-canary.761027ff.0","@material/switch":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-robfkdslyOF0nblbbY7ATaNEpC/im/Oo5sBrrRPMZT3QO4SizB1tpVuYrTl0VvGesZ6UZtspF4TQKJvIt4y2+Q==","shasum":"735f9ad589256d3f4708b36915613afc1de58b3f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzCCRA9TVsSAnZWagAAj/kP/jvwj4fTQmgfkm9lG5cn\nOdK2HtFkafg/gouHm9GwodozWa4rTn4YxN6yNpp41KDxXMAWopRGKyQ4hkoG\nwmELIJmUc16bu8f5o2789u6qbyL3065kqowkSdkcAr8UnqFw6E4Yvf2PMrZo\neXZHAKsK13xLNkxymT7XZ0dRREN/726MLej544cJBZf+wjsAWwYgUx++90KA\nf7OPkMj1Wk6fuOEKd2UiU0hhZ5EL+CmLLzlY8DgdjvQui2HyWNno4u4T+5jF\nt8GUqJ8gPUygFFhjTgYU1k+1zrCABXhYcORXCY4LiJ1+x2MEtaY2Fz7kJzz5\n9bv412hVo4Cg8b99oCdXbsvCNdH5pM7veGB5Wykodlf3HcJWc4k3Vv7ryeoU\n1bhAmtkpzVMqTjF2qFlcFf9mRvI0q6zVKe+HHByz2kVkdzZYc4pEduyB5uMr\n9Gw7R5G64ePsWMHgjKQtWISboePdmMvu3t1HdgpybwrWlJj83kfUnAfjm39e\na2u7qxkMYAxicpszFIHlEzFKW77fTuxCdRo1jJh02sndj6i+eNlYgyIFIb3M\nNLXzvmWRCgdxU1Jc0/580bU4QHvFi8UrmAOP9SH0ZFec9WPUlQefoWNgVx1K\nJ5glPFM3irs3EaGf0H4ID3hMJwLftA3Vjxv5dB8SdloD03J+jehtS4nCk0Mm\n+Goe\r\n=pel9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzmeaSZeZycGaFynAqU8ODpjniobt89eLu8AQOkmLAQAiB7uACUWcYvgrqp2rqnmbsatPVMzlfRXhmBj+XaE7a00A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.761027ff.0_1605737665415_0.32548921674127884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.dc93d04c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-ripple":"0.20.0-canary.dc93d04c.0","@material/switch":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.99cfb6bd5.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-K0IqmUA/8+KHn/MTBXBb3Mr4Go6R4M1L07YscWMSLNEiDKt8xG9Wv6N7ppWMCOdxSkqXQQ0PeOT9kzqsI7mNWg==","shasum":"be15425ac9e91227101e40eac995111476df06ed","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4ZCRA9TVsSAnZWagAAOd0P/iZVnaXaZOiZ0cwpPC+8\nLtevN0IpJG4S1cgaJzjie2r7OIlb2XA3to4hzUTQMsYPJv/q8F7W0onExmyo\n7qcpybDN0+ERPC0xHvb86f6vKDSrAGjBqpWW0VfJ4zxHTJJpSvMz6/tT+knJ\nc/eopqfyOeQYNV1szpuAHlYALsQwpg9D9gUNQWDbTvh6zpL/8foDzrEHxwWH\nZGlRI3GPbkmwYRwY2h/w7fdSjgTyBHppNr3d2gPJcNgxDR0F5SuRzaKpCr5B\nrxRu5jmmnZkbzBuuE2Bn++x9FXxrRXlg2/zcTJxf7B9vkReAGVtfIGLGD8Hc\nxncMp6lrcoxFb0JR8KDmPr+cJ0/YNmt++zZDZxIHpkUXvnegueSyrvhFxTfR\nHUtTJ+a/5DUqdi1e0GtspPDex2qs6Ls8m/sBa2S5zrSFrZ3doKnvKZJRgtJ5\nl35CtNHoAsmkID9DDkiiQElJ9OgwiOreBgY0NXGxDIi/UDaaG7Nb5rf6of++\nfLA/iu/6nlyOQL3HQ01fmUv9n8WwbACTs6ml97LyOV1CU9GWWxT8JMYpQfog\nxQI1EYlCAqIxACTkOzwoBcLHVZ5Ynn/52HS3jWBsqq5pPkxSRW6TY7u5aBT0\nc0Y20kYAhQXIG1K3ydc/GwfVyldnFduk0jC73LgkiV+/79FYFwffFKT23Mo4\nq+sm\r\n=YpcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOwhpwsScKBd+gE/NNtJwv9xAWZdm9ukNfIb69/LtV7AiEApR29Ap68Q8ZNGJBbIy2ykEdxsoDu0xUxbuCQin7Rzp4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.dc93d04c.0_1605738009033_0.26766014565340246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-ripple":"0.20.0-canary.4a5d4eeb.0","@material/switch":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.99cfb6bd5.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7DVeYICSq9e1G6a7BhahtsG8cMr8ph/Isd689ibqREsRe2qizyKl/OwoM55bOG2swKWanY0JJOfkZc0tu9u/2A==","shasum":"eb772680b8356a666f39bad8648b9291ff44ace6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldsCRA9TVsSAnZWagAAkZgP/3rgwpVnK1NCaYSSHilb\np268ik1l2wGXkD6i9DcmRG/mX6HxOuBKNWnfJyPS4QuKvQdWuHOydz7SbFdm\nP+2NRp8koKyg0skH6dFGjtt3Y1GqpNpR54mwd6EoZb8jeQDNQpdbmRX2WSLK\nCV3DPe6AWBmDa+Pd1OurES9RxovN+0BVTJFFEzbGLbjD6SkZo+CT0Na3teQT\nnDlYupGvPiy3Qia5N5GSS62/NwjDDyIl9BpkFHo0ipVWtnWpZnjwpuNbkj95\nN1EsLAfckxd5Xo6iXmsT12yVIQmibl99nRDrlADAs2PEDjl+Rf6nXH/cFTzb\ntJ9AVQWRHdEqJD7jTu+tlvyLc8jdgazW6+2XHvAWzJu2/LlBGeWS1Ludm0we\nZHvUXmwr2lEEaa2If17edYlg/aPA8wS3QzzRb0sfwapkVhb8EUVwCRiXrr0p\nV/of+YyydKb9vN9BwIUFPromxmiLgc2a8ai7Dtb5z2RheEyV+0qpY5fjhtLW\nZzzLeCGbrdM9DXdKU5JGUm+ilHDBjvhpZPYcj6qKVuPEn7KPi5i5iFCX5gvU\nsAE0QgsI4nwjXYzxwfGE1NlhCR+QeIdu3q0lyubZpqZIuF0Ozi/6EM0od1oG\nAFZVMyFxcdO2MQpriNZEGIQ+MkWEii4HfjwctcAklNexEb+yNRMOZnaVmVvR\nMGb8\r\n=RB4O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjM3V/x5WTPEToTMV6myRr9WJJqAII6Tu0aaWJp3FXQAiEA5+xci7qhvBdg7nU4/TqKKMO+pUSlKPPITKTKOJQPF/A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.4a5d4eeb.0_1605785451049_0.3232496009932937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.bd176a15.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-ripple":"0.20.0-canary.bd176a15.0","@material/switch":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30c11bfc2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AxT5IaeYaEI4li6u4XYbJPLnvk7YzkttcSd5C0Ls73yUXF8MqYavMo8gtNfTxTeqIgq1fQKFkjiQoAFREe+VVg==","shasum":"a455a73b3afb80409f7e78fbd8a02fff483d7cc6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMvCRA9TVsSAnZWagAA49kP/jfAA/XLa0Nsza7qS66R\nqLLYRWKH9QAq6kXEYEQkfRIS1wuQ9cVoqzuoS0P0p0muM60201bOuHlq9OQd\nHmcKzL7eMWV9EPh6zkEN+xUYhI2F4otEQxqAqy9mYVv47wHDG4D40MOt3yA+\nDThQlyoetWY9TtJ6fvQU3UUOb9/yoxUd7+Ho8qTDYg2Sfi/6OR5wssn8i7de\nVliIFjjYUSeoUNzQAMmTzWv17vOm5d42kUhRKcZRIGX+WuxbkBiwCNYxb/d6\ntPW2eYghWuZfqShV0zDNGiRNBKkvCP/1AWXjbpA9DpXYwdlYs+RVykqsFDTq\n4gbxLkSOqwQsr8b+mGWCk25AgNYIkYKdJVI0wIyIT2olIxlpv4kYAj7dJ2pM\nbSPU31DWRpORXrgh6CZZYU2X513ZbOsA7GHTdl5TwJ8AutC3/CL3PSJY85WJ\noi1Veo3nKpkvA/N4X7YuhgwaRUUHB0i2n00xY+QafeOsrClulRmw2/QoSXlG\nJbWab6578AqanE5I9FXn1ULVTZvj6KGAaXdbza8Jg7zJ3fjE/kInjd2LRzg3\nVwl1N5xox0eT2X0vJBC4Hm2hWIOfyDIk3KV/UkuW8YQFncJnOoWVO3yiUd2D\nw83ivdjr5Hlf+5PNk/INlhmnF5k1GASHSr7JkyybZWf0kwChnXhTdk2WLB/K\n6jZB\r\n=P73q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDVASozzf+NHDwgR/0BzWjPRNqbsDbmYXjvEgFaqrBedAiEA6RrwGanfGfoaT4mGtEcQx7YM9cD81S29fmg/qXn1ndM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.bd176a15.0_1605813039258_0.3754724627346224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.e85aa60d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-ripple":"0.20.0-canary.e85aa60d.0","@material/switch":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.c927a5d05.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aeIPrC/W/K+2yinCfg9FMx+nRzylxIfiR2/X/ptUvL1HQnmBU6ItXIJBTZb8xgnZMTtK8zniO2aoQht7NgzOdg==","shasum":"847b06acc0c0f0c0e38ed99fc0e49e5d0a660930","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDa6CRA9TVsSAnZWagAABiQP+wRACZD4rQIcVx/MxYe7\nhu6pJDgNb0QuL9liwSXLe4lBZqvaspjS85sm58KjdNFcaqny8aj2OfLBA1y8\nzXpPz2Zb//UeimrKR2Jg84JB14NX7y08gM0qfpt0DVaufS8HDT+nHtjAQ6tX\neg8NHh161xGyR0hbeD3a7Dm1CLGj7fYDQ51KA/5mff9X3OAU/RYXsAdMDdkM\nTX36MqQ6J7+eU/CL6hGlW5gv9H7ouVNt2OLGxS+7qFpVfuW9BfJspdQ3uOlm\nfGdoEx3mEWdxBPSjshggND170GVG+fy0MeJw2hbPKNowXoIZlzRCf4pFzk/l\nyGAuHOCD2VlzJzATiTqnI81n2YCSiEIn67GRjFYxqP67LrxNSMASPa5F7GsA\nw8bC9NKW17O6i5bCr59cxTdW4UZxZEi44do7fa1cR62P8HLKtyl+fqDHW/MA\nYslOr7y7k7Izc2nmL8vZbdk9au2JnObhE3HObOJsT8wAeXqWrVGh2S5hdnt5\njvEWdSS3E1ZoWTE1Bgx9MfyKplVdRefJDJWVCjGzVMnZPUbMnT3pKLU9QTTn\nc+hkOPGmg4I4mPonv2TVDh0qBA8Sf5udqVExk0WYRcq2/oSt+GHySiHYk5ln\n7ETGo6Cj8nr6KW7JPtKuC8w2zjLBfmF6a/tLw05dYTAG4AsTthDeasp0gAR1\nYtBo\r\n=rkBe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVExFqZSYSs2ZpyFsMqKhZZYDN2BghABx80JtTVJJmGAIhAOqR2LDo91KGkxY2GnsHeI9e3RxTUcUh8Q8NcDP57yUN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.e85aa60d.0_1606170298162_0.17966337789229492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.72092360.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-ripple":"0.20.0-canary.72092360.0","@material/switch":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.c927a5d05.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ojKcnCU/w8Atwt+N7pbmlcIdnLq8Zere7AYj3akKp8Eg/xCzVOXj84mkkMzmSVHE9NJ6Zdjt2KH9/PIjFWGW2A==","shasum":"69ead5e82e52cc77ce38b76647087d6fa59256c6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImTCRA9TVsSAnZWagAAF3sQAKNaQPZoeJwq+c9fz7K+\nI+im+UOjOrF1StpEsfAsuHgjP767QHsTgFU2Jt5kJEyPzOSqxOJYgXp1N61I\nbc16wi+WyV/WJ1t09a5tXTP/JQd0oR8bWLIaRGPiLvHM4hJwxRUu9DgP6oik\nJ1SxTH6cu/UQej+pksU2qAlZHKLC3rd7r/e46G3y9+2Pzi+G7Ka3IRIiks94\n/nDfd5Z4XPYrmCcnoxjdkvmydkCnAHEFZvjhTBE3wuCVWhIXXVWfMfNMBa6L\n3W6iHG735cTYBjbM/Kr5UW4MpLRqW9C0ERARd5e05hGsIMZlaMH9zAuCEtxc\npWGbEV5yCxrzGoMzdbtOQeKAKTiWqh3D//ii/1sYbIUkmBcJAHIDjB0E5QOB\nsBttWw1TmxAwCuK+vaM4/ZIzb1bwJDdCZUGbUGnavL6IzrIS7Yi7XPV5WQIE\no1mCmoN2rlVK/zMF+6jAanCnnIVCpr6oh/a3X1fz4qqeTcgFf+NCLtd+aYgs\nuWy0MKUACG7NfUELLMklqsl9xD169uPCarnBJJ3H4gIM3nCDJqNU8lEaDfJ3\nfLqj7oumCqFf8bhuwuxmeMpwjBFF7vha70tlUf/GcbHkrt0ps9w/HpPtikXI\nMshGfVnN7r2J0QG8LT2/67y/5hXUThqkKjWJdKlZpwCJwEvMVaDGaoUFAc+H\neYpW\r\n=z7Yj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4yr7WxQWh0UCjI1i9VA4Bci6e/eF6smXAGM2QERQlRAiBTpWXRzvqg/hUkku1YCsCqm27YWToWL606NAtQM+onVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.72092360.0_1606191506758_0.03380295581238357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.baf9d39f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-ripple":"0.20.0-canary.baf9d39f.0","@material/switch":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-asENwuture1qd0TePqKPaa2z/P1CwbgKxaarR2G9UOLCI2MDP7CSC/S1Tj3k2jhjZdgQOmw88WMv5/KydxldMA==","shasum":"cd8d8ee270540d45622693d1d8fad3d1f93f381a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEwCRA9TVsSAnZWagAAYNMQAI5dwEPudpre41l9Dn/r\nR4gGyV5lzMRNlx+F9cwOGiekrYfXE+T5R3YIGEwR/S7zq9A/fx7zAR2PvsMS\nHuDze/zLsUnePBuOUol2tguYYbevijF7Gr9Wq4FsOABwRGvE235eZAq3vP9d\nbY5zX5ARM0NPYZSSF4OkewyxwqG49U4s0TDyHC29ehsY+opsTPZV/NlUfbrk\nYCLDlIm4B6BFq0YYhqqVAhlI3B/zdPS1PxjHD/qWHzqFnWTId9tXi/Uxaa8G\nQTgNDtC5GtgNMBk+isrimMEjm7ZGX8SZWI6DNNB6ReuRG+8q23f74uDtL8Xj\nzK2PXS7KO7vToJzmVqGfjBib+czq28eeM8tK7tDHlC9j3BMPqmH4W3vmJGLT\nyCiOw8gMyyZm+BM2uriPBv3rfCskHhGWph+mSkIKQKLrfZ4GPW0hBCTHBYZE\nAIee05ibSa4nQdBtzlEr9W5iK6N+D7U13ZlLf/D065j5a+3Y7ZzqoFF13Ci1\nfGa/3LU3Lv/7/8xLmFyjVhGy/3SXKUxcuxbGnEjfbzuNALOmMECYHKGUrpMh\n1afb/5cDTSWhDXcPSGX9VQnNcyC0CbSjtqLjGL1anUv+XGer8YtUmA3Azjfr\nuAZhA+wZfocfL5CFE925GUhVhsg0MweiRP8IKJKBFLzd2/01kqldDNv5KdCL\nO04B\r\n=ohX7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPwqvQVKAn8M7aaQc0jbsfYv2nAbkExfHhIpOd53ev0QIhANzYFEqVR4PB0nqf1/LOcOQL6qcuVFhUD7vmC+xmbPIX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.baf9d39f.0_1606340911876_0.6524288547201411"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.51aab0ad.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-ripple":"0.20.0-canary.51aab0ad.0","@material/switch":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bEPWeMiJxOZ4uEs3jBYDb5rgTZLbGaVlxOVD/hM9qLtFgYyimO5Y+0cC5ExOBPGoqoZbAkom/+eWP60GcBCy9Q==","shasum":"67592b95e2559c522d3c1aefdd41bf4ae41d82fb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbdCRA9TVsSAnZWagAAinkP/17HR6RzBEPsPE0xQStk\n7Of0+67CuestHhI2ybBlftze0oSriTCRwukbSBSJXQTZ2uBPMBELHJeRuV/X\njapIlmPyOOvtigUOX8XqV1lVAQbG4UMwOAL/S+lqoWerr5DPE876lT7Qh3eR\nygv+Jeeqs1fgnx6/UDW+hmZ5qS0pMDSxLAxmQfAb81hLap9/oiukcnOsxWQu\nAWpTyIrjg0FsKxylgJqKngEnOTheNv1yK+PekQ7/j1n8tVNPu2FGps8qxpBn\ns+Iij/yf7JHWeV93Bp4Wa+gHfllcaudc+oniZCMN1cNwhqNuOxHfdGhaqjhg\n+BhYyBHP447u7rbz5yTAFPtj6B+NblhwCTU4whqfKLQbliSxW/1mzl4yY1ED\nNbxlbd8PTJBDkjBWQFz6gX+a7Fx8CQjKKpI+MZggS2IRWR0rcgInZudGcHCV\nEwRL9UkGRcjQU2jiBXpEvptYnmp/SrkX6jD1cd93dImNlN6ihyhWp1tIvHcw\np0MkxzeDqeygz+Y6cKcWA93zeNcMoGEDMj0LrNTz5Erx9ityOI0m6x6ZfAdl\nazLNFFtpmxQwtgOSp+pLGKPrJUkJt2fE80ml9nvDtrQ8Gm7q9LgNeRVZf+vo\nwzj911urq8uX5HZghK62IQ2ozytKgKHUh5DGDxMSYJYeL4w7ukhfRg0Wjz4Y\nsFJm\r\n=KLxF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+fnnDsmqdR/bSLccIUaJsbwNX5aRFrXjq1gTLWkSwRAIhAMXNMc/pF0y/VrLwRSu4zhE4hqAYnQZBEnAqoVdKNJFO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.51aab0ad.0_1606784732687_0.835938596668597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-ripple":"0.20.0-canary.8fd4af5b.0","@material/switch":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5JrMBhUBAH5+5J9lHDNSOZ9Yy/ldPvxAhgZeQwSF49EfunI5+XmhDx85SQT83r0VlwF+kOg0cxrD90GTCMA0cA==","shasum":"cb8ab03c97237e5970640adea2b834b71a8a42da","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDxCRA9TVsSAnZWagAA9fUP/jgDAm+w0HlnHIH00oWE\nFz+61ptatns3Ai+BVMxHn31NDef2YiwdXYJV06yqZyGqmBb+tSfg+kGp5eEu\nfhSoG6jLrvbfi4VscexyU+rOzJ5E+iox7SUfxX1/pgLgJTg3kbKdUCX3/axx\nAlUv+NMsSugp5wmmwPPzkIa4Pu6FcpMP3MnQsvrmOZ6ODqcXhj1pz8SAYNuK\n+phrEH/E/DU2zyaGCsSwemQBUrkUnpIFZxuyopoqEOBiCPGLdu0pAzjvfm+d\nZsHtz2sr0XtvbZbZLdGiBidp/DFaRCj8EdCoFuHNuc6tMJlNocdUFJk6Ai0Q\nK1n0pGTRXlfxYh6Ts9DFwznEDeCWfYjB4lbSHEU3OS+NZxKVRMMRKEIjkIJ5\nHp5FbA7QnnMJvn9nqhWlZns4eDnD66vl+FA7pyD31Wg2sAnGHYFJ0KBzQ9XL\nLFsbRtqy9bxB466XHv5qhpU2d6kNSgCLKuEKh0NKYO+Ov+bx154VqjgyREkF\n/Z2IASRPsMY+4UkVbecPgWKQHUkMqrIrPrqP6s9PHtZ6T+CZ/k1EwOYT3bLM\n3OIZHaFOgEQmzslG8l82tJ/eDyNDwCU+k3r5x/4phkXfH8rw7mfPcOrV0DVK\nungHsREuACg3tpyN4UxvUUBFULIRXbjmtKBalafSkKD4d2y3J357K6nkBYvs\n2U7B\r\n=vD+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLFPBdtjouE3fZSzIYxawAwu2GzWBAfQwFfmzRNWXcjAiEAwTvStyiuCCPqEZqyI95lxCO96UZTLgmFwLAUKx23TyQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.8fd4af5b.0_1606955249237_0.9394888934753183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.26d14d2f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-ripple":"0.20.0-canary.26d14d2f.0","@material/switch":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rHJOA6ssTHWTzR6TLW25+/SsDUgPE6bBeV9FM6kaOhhZOxsl2GGax8QpxCym60n0dEWhWnCo4cBIA5cQzOcJ4w==","shasum":"ceb94dadf4b4ec135f28cc465b687a22d1e1b7b6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDemCRA9TVsSAnZWagAAGDoP/1H1pEFUVISFqT2qIZAT\nF2aui4afverLfh6LOUaMlhDrKS+CA/7jsxu17DRjyrBvEPeXjThZxATiiD1B\nxn3EvYppXVtu5ctzAgmxNTZjot40tQZ9xQ4DYK7Wc6sZeqwyTulj7EMsJH8h\nCD7DZBpFohz/Ooih/pp/oSQoeI9KTOeudANR+yPiaZ0CyxLIatRidMUK6im5\nM8LqQ41kxpBLfi+50/7jHo4a/EEOmEPNbnHG09ap/uek0LzahyV1aNSja/C4\n3dW+RQeJ/4Oto5Wqr76Mzs08ZXtsYwCAEzn+NutUpPiYbYr3m7ZQmE7NLXP0\n9ttKZpEL2yr7aoIe54WVkO4FvdpCCZZcO4Bd18Lmq+gQ+nJg6KmEd1K6Y/ub\nGpXH5MoDm9xpfFdcaaUayBj5s4B7F20ZHaG+4EzNHDMIGaDIgKcQ7XR62XgC\nTyWiTC35XWMgUuDNs6ReV1AeBPOrjTw6p/398MTimV1C9uUz5p/Cigl0yxvA\nzivJdvZBjvauBD2S1rEi8rPgfwG4DjPR9h+SKbODR84UnN5FjrdrxNSCBKue\nmWA/9A7OP1mTo0NANTu3eU7wTs9HxpcvaKBlGcOIWuq7WKI1umxofMS5TnTn\nv8A1VccTKiJYVyT/Fw86+7cB1YmANAv0FdFEyfujV0sWi7Ac4TwgW7kH9u65\n6et5\r\n=RjZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaZtntd5uq2zODoaV/YBZd+6MTb8ZAoMWKsGuLFcOQNwIhAKFpu8QsMOQ5aWisNyC7OhYGU51RMKYV1w6xlWrLh2kL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.26d14d2f.0_1606956966037_0.38542133008190826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.1663d7e4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-ripple":"0.20.0-canary.1663d7e4.0","@material/switch":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-h07jzBbGDsLxthraMvorszZ0naa+HxOA61C0BgQ3XLKC3lyoYwW4mkAC2t0G6QCIS7qYHRkrKsXEYdIQqT7G6A==","shasum":"1aead1808299c7cd54b3d0edb4552c4112b558ee","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDx8CRA9TVsSAnZWagAAzZYP/2oy7++qCaiQNmgXO8Y5\nbr13550ERtBEmOwuWkVEp9bqIQjHp+9zHOtenMew0cdkStwA0QNoegn9NHZU\nyxWmWCRuD85bCkYnJk8waQ0D87BRMh14AF0V+Fwa8beFRS0/MTDWSDQlLiZn\nVW7KeJZWdRvzuAVgBHoUabmZlE2Cn8QuCIk7uX8mNWsSdQUxQ851aOZVlUww\nSqqCeEgiYQNmT9EIC8Z1rj6HfHOV4+xYnqp3R7TohoT/bI2LQo4OLAdGEdn0\nB7aWGO7ICQqnL5QQM5b22/xfxyAZ6ZOyWdmqFkCXO7AKlLUgtlzNi02r8woo\n8ixd7LYo8Iu9lTLTaHyY3tgsbYBjJNAZkNn5y0zjhAtCo0OQR2RF41MXWFdj\nOPCH+11QmIcuZ+pPvQ2HgDy220VaQYxQ3I/rDYMj6GlRu+6zlcDdUij1H9WS\nsvJcdGtELj2sGMe4OY6ncvIe54TcElJlWJLq69be0LbBbC7wfnYZ6d+LUp3m\n/Qx3ZI04ddgDj5FTNCQgEONq6pozbdzHCDZ8z8UHVcxnjDOcCT4rEtY36hgJ\nezPbipn81mOgs15o5nNKBuPT7D6rza0c4cSnMQ6U9Vs5NRlbmFJB4yjbZ+mU\nS5HezEbqanbSdHHCfDCAEDfKEEdBodNzz8sPbdpCj4AOEVDfN15Gc1NixYSe\nFbaG\r\n=k+4T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrkrAZHQtobuX8qUjxID6oCbY2HZByVKXMmaQmstAelQIhAJkENV/SkXC2PrkdRM9ZzmOlCnb8YAkTRp8aE+V6A6Yk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.1663d7e4.0_1606958204139_0.715175495869387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-ripple":"0.20.0-canary.cbe9fc12.0","@material/switch":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tAn8NPOr+1df1XE1CI6gUkuIvxHcANvtH7BWqNhGz8UmR47MehgBHN7HXdqHMln9pS2WB4rNVHjknKPmgfep9Q==","shasum":"a1fea9e0f0b378f4b90303246bf1f6b9b56949cd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdzCRA9TVsSAnZWagAAHGwP/RCOxbBw6xPb1CkHgkKp\n0JivlF81Z4I/aZgbelB39jqmdFvRIHAfmsEu3OLWqV3eP86VHceE4GjF60De\nz/PZobu/c/EBb8PynD1pDRZTHlnIK174pfZEZ1TC8MwolBtxb52RnGP9TuUd\n4+Hogt3ippWgrUtHOmk+mUQbbdWs09XHOjbFZpqXMd1If52lUyl/E3+Uq4DI\npSeo7nUXUMywgBoRvaAsCyyJDa4hNyjBzrawt2M1qgfQtg/hPaaQg7Ic+WAu\nAiQdf3sktG7+gTt8xL8BWrL2iKmcbLK19zI/VmE2djg1M+TLWqQqTjO61xPh\nW16MpcX8W/f6O62SCcw2j0KCh5qnDneT/qfquP1K9WJ7QrEXRnCsgkA8oTVC\n04dESEOWIjVOPR4Fq4Will01HL8tbGIF/AQBJv/coTVCyLkA+z7EOkdEKTR5\nH8+YA9S/9YdIdo1vaz83ViXC5z9vyFaQd0Aw/ih0hhEtKGEPGbtRPvmJsj+Y\np57wCoJcUedYLqVzO1u9eg1utLppMyfLJ6/gDgHoii88bYdCwJ4MZGE7lfaP\nQP7dNJLQ7lazEus/fLtQiMJ1Sq46P3hGh0W7USNzvzIrRToRUOzUQGEUQRg3\nV/i/shmSs2WMVDUogrOGsHcA/yS5LOaD/+UDfn+NnhGYwt8jfu4SwtcF7p/Q\ndzAn\r\n=RDYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsnifl5mcH/P+EUbYw8ouT+PP9yv1u/vultpkRYZ5ZGAIgBPfNKWj8mtnbB7fhWD1ihkX9hke95QzKgIYr2aWZWDY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.cbe9fc12.0_1607022451002_0.05914957769861884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.9755be10.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-ripple":"0.20.0-canary.9755be10.0","@material/switch":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WE22KAqev7p5GsxHBrmZJTiXIjfUsgsGfB2tO5AxQFuKqUmGQ9ZwfMd31EdDXgan5YCTIM5Yh3LMMdLy7tfhfQ==","shasum":"ba94d01df93fd695c097571281fe7f5af1899c67","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuuCRA9TVsSAnZWagAA4BMQAI516+sRi+lEiQ39K6tg\n7OM2W20IyDh1klZE8Pn7iV9TGXZf4qy3LkLIUIhGdiX3PRbvRQYOrKOpobTu\nFWTpWidDnyw4F6NLu5rqfjXFe6/q5/QA4C8ZxoIaN/8W+braGonBHalVwpbs\nZbSZf+J7yABFOYzLDqyiG//nfZRTMflTbB3VF6Lc70rngdPYRxqWoBzX2O6V\nB4N+DxaNrcCwEz2nJdseFFfJfLK9+8v66YbRlfCvB/xbh1isIssWbEt5662e\nhxYnI7GmtDV4V9JR88yU09Pb9EDMxrx2kzddNKusVSKo2aN3bbr9EG4+oSzA\n4P+MM/W9MNyhTdfJyNMJUMSY/xDRblAp1qMTalDsQkWsGDZ7CDmeyxlXgaRH\nBixGnK5Zh2GcSeZdDtr00gadUrwa+UQ5pe83w0YL32pix7j3sn7YkfdHzdlf\nHu0H//fGvcdZOjgV1y8QmCrXU+JJQeIUr0gPu3PjTG4e5fq+ogCnN1Xc5Vtg\nHG5OPa/JsOYI1+00iTZ7hCss493JG17Zxoi+yUKnfhn3ReGCwBEViB+9echW\nM0ibB6M9fbunqD8aZ5ZScwisj9Avej9KY9rqqj4W51KDgbfIVYmQTvNd1KK/\nHO6eePsSgDL+7d/h2wGnm0/q0sNp/QSDXTkHPdlfyKrDkS09SvVwDYVX13FJ\n2xEu\r\n=r4t/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTZyBYot5bCm4hY/pzF7Eel/w5VwqGG19/Zj1MliDyUQIgLZbOSLxi08rOl48mImcwvFu3RHXlwwGSRy/NPlfbkfU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.9755be10.0_1607023533317_0.1865487154266754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-switch","version":"0.20.0-canary.3f64270c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-ripple":"0.20.0-canary.3f64270c.0","@material/switch":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2Gvlysp3E2hKDLUOWYTO/MWA587sAXiO6PHD/549CcQdi6diCjr4R+oEwEmrcsXzbNBvxNiKBEfKAWL7EvhqKg==","shasum":"6fe3ccc4a8dc51cd0080e6ed925e8206c253715d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2MCRA9TVsSAnZWagAAyFAP/1v0oGLJFcrToYqNIbVk\n3xkppprkD86wVW/NRrd+vzAYb6lCu8NZCUGJCwb3P+er4Ql8GJmsLYoldBfM\n+f/CrjOqxTK6KZKaj2LcAnUbGUklBW6/rpc18Jno3P3bIKlfncmX6JoSIs0E\nIdDuk64C7dJjCREzx1/kXn4a016UMU9n46+Bh7DN+P7yWgQGarDplcyBuGGY\nmlrYhMWACexNMiEUJcvwbjjdwE0uDv8p0kt944z7g5vpoqvWzeSOfDIzYfUX\nECrg7gzs8WB1uM7z0YxPjoh/UnIk/rvmAwSNfObU8UeGdt+AAqHxnkel/pgt\nYWerkcmI1IjI2Zo5IRDGX6u58Phx1rNGihI84ur0u0CoPY4SakK30DWFPOMF\nAy/bjsojvzzsqE92hUjCj50qSViAhRlvk0fL82tJsOHnsYHDgDG/UhF+LJ2K\nOmRNc4HQ+f6jWklcD7uArpm1x0w3iOMwygFImSe7v1mk5mEpZ2EM7+DciYdw\nmQ9j9TXohKuFc5L1P8714igznBfK02cssuBVieC5ex7/TF4tUgvWxoplTyxs\nflUR68nk4nZDmdB/T4F0NFJH1MZHQIlQB5L/F2L1krnpScIpT6+m4b2H+llI\nFTa2q51EQCiP51FcMKgdEGjdW5LRHYYczLgutoKUGZDMIlm4EPlaKnNAqUlb\n2+nn\r\n=3h4Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3VmOlyX8i/A+0KiyRRoVFQBkatj/cqpNnsWG0IVubxAiAo8JnjTCcy2kki8bH91p+DLGn8bucqW7xyxMLEOG0t9Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0-canary.3f64270c.0_1607032203556_0.3768134955188176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.d893b14a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-ripple":"0.21.0-canary.d893b14a.0","@material/switch":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mSUK51tk1cfy6WC4YQFSzYHT3esw32g/R70mXEjUHdop3VE8Uq2iW1YFBF4tX1hw3EWsOAc9y23TPrLbzXxj1Q==","shasum":"f587c82bb5ebe3532241b1f636431081e54968fd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYKCRA9TVsSAnZWagAALQUP/1MOUeWXtT7/rf2QP/oY\noKIJrK/Lz8z7HR03Uu+VTDZ8ptwRW1wTh7PcwuY+ypZRNOlEu42YCPaitCNL\nNRfNUSrI76TVmBqcqeA6QANHHS6Fv8h0ImBr7ZgmK6JlHtg8jNjdKd7vgfaj\nikLzDkN1RCyrznUlx04IzmpkGpTuyIh3nUXp8QSO/dgQzQ7aWJjOdzV0VjDb\nlelT/oXFw/fh8TecXdKLJKdUf5k1yCQsNnEOKeU61csbGbMi/rHHYkgY0x43\ndzwRC8SY25DfAOjnUMn/i5VV9p3A+zBS/Y6bKBvxvD+nUNDFa/zKb+qGbiYI\nESH3qH/7ejG4WITH580QHz4ZQtq31LJDBA7xwWd7Z1k7PsZmKOCn1AqKV11X\nkZ2kU9fg7lFlr8lS3eI07rf7Fxcu3m537I/B0M2t2Hr2tcjBv/bQVuGbAeX/\nK/1LG8JyWahnYo3jqMRYGxjhZgiKxV8v9zJaRE7L9gbX/Sh2Q7eOYyWCngO0\naCdgJ0QhJtHVD151TfQOZWspxRnffON4Roj0pcJT2w1QkWYjiEjNpi34kM5c\nGAD9E6MPVxHJf+ouwwaaXd8TDRisqeDpOpc4NTIsEGTSpyMexj+aib5BWUBY\nuyfng800YyGihrvA94FdNsvaclNGdO7kolL3Yy1pDd8m+6D49hNDCmTrQsw9\nTtJo\r\n=pmge\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1/50S6hVFNR5/sz7h9hSN+8AsO2H7BDUFOiN24LudmAiEAqOwhpcUgRNpqxw5IL269cvLPVnGYNb5dA/AjvHNDzYg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.d893b14a.0_1607034377996_0.5998280252676458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-switch","version":"0.20.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.20.0","@material/mwc-ripple":"^0.20.0","@material/switch":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-1++EESLaVGdRQTpm0t5Z5Il/3IZTSaMzBYb/21AVM2SkNqWG5/2ycd+cj4BhfViIBjPXi0Ajcz4nhxHE/6SRjw==","shasum":"e4b3c3f512e7c2c497f07828795aa543320e81f9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.20.0.tgz","fileCount":13,"unpackedSize":43089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWamCRA9TVsSAnZWagAAoA4P/0L8DbsbYkYUGLsraUpZ\nBh65qeNPjHe9LTAzJNsHmY2Lgp4sQplk6zfW8OejYTivMYoBwx7t30I+Q/A0\nOLcpfOtvVyAdUpHwWDUOUyi9ddmTqL/t5rB57w1VftI37CBTHewxYm4jQlcv\n6fm21A5JqvNeUOlhrEgSJi236LzuAOMpSfzhahFT2uT4nv0flvt+FGRzJlpH\nKQeH4VpjKM/6h2siZELUy2yqFrN1gUbPpdgoiYDX6HXRw9vN3mx0nM9T1ZCU\nGqP0ka1QDKjp3VMqhRuz0E6Iyv6gYhhLzMDkggiEn9QvRfxI9AHVyWjFkyJE\ne1gmNeGshhRVG2NeIuoVqa0BuOxZ8YmiHKHzDwOW7P1EsXGITA32WCF1j818\nS2K6c2RPqmhYikRTAezby+SWLxiIsVpIfBRXQEbxMTa/apbzM5j//3ZelA5F\nukUkPPvFPjpqbFLhmXLGMjzz4zFu8vpL99VX+SEnGX62v+Kge99+hK6bnKg6\nGixz/EasMAdIgepy8cC8Zsqm9vknaDVmysYTwtfzT0SJ8RrkbEHWAOeCwCfK\n+N5gEWrlcPScHs9EWtQpevEtMdkk35jfONtFsflOh2Q0Z6RwmtXkmbxLwC/6\nZcpdI/pG7cyl4gCQCj49CaCdVbD5e2U7mlqhK5SZtSfVMcPLdxeyclHItlq/\nsbEk\r\n=1xKa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGVjPlQj/ccx1OGLAXKIen/nEnZEf/GqWIMmZH1r23uAIgZanTBrdMHcYEWYu+MTmyJ69qwgl+nMbkTYl/wXMsDJQ="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.20.0_1607034534165_0.1993908370672457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-ripple":"0.21.0-canary.47c7d7e5.0","@material/switch":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7Tc6kDJV3jYtUygKB51J3p0x5pZnG4E2wPx+abYg3DbFOZzGluJ+/HA95j9vM3/2dYK7G0YnZeuIU3JaTIZtSQ==","shasum":"717a3a4879975cb4148947b7689410307c0bbc29","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088SCRA9TVsSAnZWagAAbPgP/29FiUstWhGYcD03fpJY\nev7tx/IGDFHfCX0xBrpi0a/kzlp3X0nPMJ5qznmcQeJ9A0KG26LkkKt10MLQ\nVqU4vOIkvsA5xR4M7w6QL1WGPnBHHRkvFp+e8zbF3aesE336kho3CMhhF/Ir\nIHh4DrRLF5uFz6OGWVdsfN/eyPKGDvEpXgYVWCzhOTfQK4pb3gf+aeaxIUmx\n+Wv/vvgtUXzijqPdKnyoh6xP/dwTWzdXURRimeZv4zsi6nekPmFMzk8YZx/u\nldKVG+BvXyspjA0e4gkb/9MuLYlj33x1g2D7PpIwQ2Z+J1X/Try13ZBV7wUy\n1RmM00+15HLsYiMwitSQIy3CVnpYJxyOiatigcWyvFpc7KtDCjUPlInJbU1R\nnu7T+dcSu7JHJcnAaKy68gVLSPUb3mgFrIuD8aT7uORwIZhr9Mdp5Rt3YbDC\nXGx0MptJ4UyoOa5mwrN4t+JZwyY6O++OXhCfTFjTT4y7/GvILT7Kwq6+S7Gi\nIfdUXpUaFE8jnnLuJYfNtVlmhyZSrJCOWTX8kbwfzxUgkj2S1N+q+BMsrkou\nQLWrEYVEMIc+kdcgOxzOI9fboaRAoHoCQymmepW8EqHrxCnkAG/kMAIlwvAx\nDhUH9XPamr0E3hxElbYVlN6F81xP05KP3vcL+lKQ/wM3ZHAUeCpcRBh/rIQx\nR83r\r\n=Y2fR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOmNklniUjzfWyxQOZVXNCSCC9c98gcW0lrtMoYVwDVAiEAggb3XnylkyO5vrA7uZU5hcHuspYpshUr2VVSo/HgTtc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.47c7d7e5.0_1607716625653_0.8216258222148771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b304a78b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-ripple":"0.21.0-canary.b304a78b.0","@material/switch":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.9244508bd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gIrYEjFOcdOfipYdcXkPXQnIcoRaObJG0b5K/bkeC/s+iopObdGBYrmO1TF8vX5H7PdE7n7yWDDIW28MuIKRgA==","shasum":"c6c7dbcac81a38605a38aa4dcaa09bce37e448c7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbACRA9TVsSAnZWagAAiWsQAIwEDkQ9LSfyj5tYvJUn\nOftK195ex6J+jtwIPkdbmZzUg6P91M3weSr/vHDXgj0KoCXH+5ZLUt2vebng\ndnfSqtO0mfq8Ze99ks7bobJV1yeGCctTpULQ1VhZS015NMNNq2hPnph3h8Kb\nrf7CLrBsS6m9PzxsgafO+0Bw5/ofSS0hDxlXw00lw/wrZyUydw81nSnUfhkI\n7e8pOp5Y0ELMLemLY8PAXsRx0lefOrVahn7f0WSUqOSbvkyDmQlbwzuvIPBH\nTn6M0JFnA3sm8yacnWveYEFd3awzFfF+mJsqOZnntn+fUbSumoVQ4SamrKzL\nR/9dAmMbMoqABbFA967OSDcgkpc2H/Ov3DPtBvPtaPW2f8NzYBZvE8lTKyP+\nYu68r4xbs6kJjoWWWPlNX4x/XB/AaDtS2/x7L6oIRTYMcxMpjxYUMnB6m54B\nbsV+aEhDmsQJ54Ep7SFZy+otFFPx7gVKMilOoG6qg6SKLqH4mg0xbVBF/8qN\nOwj4z1VsicCIXl86ugcNOyq7qUjd9Uy9WeL0URL2XGcO/Z2UiBcTtAfSniCB\nypQys3HTIITd8mh96hjhswShAX1LMNFop2BF4iBePXPsYgAoVLk4BdwzTlmf\nhWe8ytv4ehWd0Nlq5M8inf1mUz9T5zBXKMlWq7ygp5u9xLZtfLuKjbX0cuBo\nHw3R\r\n=qSX4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPr2mYO37EWo1CjTVLjmw+mRJm0qNL0NOZ28pLiFNMqAIhAJmyedAetTkkK4NKY/QR3Pukmv296oeYwjxoRxSWfAYE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b304a78b.0_1608062655796_0.2133632956718976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.777c5fa4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-ripple":"0.21.0-canary.777c5fa4.0","@material/switch":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.9244508bd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Frt9oTjCzBvv7ccKzxDsd2ShZMwnTr7VeXZncVSuUnwPAuENvC2jwPc7yZC1hBF++qR2PtP+zmegUmR4xzRznw==","shasum":"6071f7fd7e30376e5425435655fefa032f000b36","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oIGCRA9TVsSAnZWagAAffMQAIO6ovwxi2IZogwgrBvT\nKK8ofVFYzdTVVNNCLZloUICb2C6S9dwxhO1LNfTrzpJBerPVNEEdo2rQvFCH\nUuS09h3Ddeayb2wY//ZawsBWw9hTegzcSRd2Mg/fvVQRP/QQtBFmhY4Ke7R8\nddP7HSDizntwq8UEykl+bq/gyv/ZjsG1J3JhDMwzXPuMz/H8TQ3jrm8t8rE3\n33ZrNZX3hPPtHytNjTmZjpXeIZVWKtRkbc5ee2E4iO8mFyKu7lkNH4hkpir4\nt222V6deTKWdl4wV9S9ySm7E7fFre6wnl996G4BUR6rSm3D4QskwJBAF6WfH\naDjIBHPAWP3zE6tptL2NyKy6WE7VpsLpgpj/wf4PDrQTOeQSWUbIRWy1dxFR\nTBKLOlBtlrZ/2FhidPHGKFLAeJ4K+7Yy76P+j1DHQo7ES6HsWRUD7XxoMtPm\nkXmd8Q/2YwuwHAUZec4McG6rbDVZisYUm4hl1Evo1b/NkBhkfDlsHvSXyeDq\nH0gB2efTsTirWzm6bvxRPB1z4EHIRtsPltCv6czzO9VEYhxbZjCVClIRli7V\n/Pgv/uSBJbIqUVBQNxfMUSoFqhfrVDY2R6vTosss++QmIBdBOR/bZa4zoAFT\nyGiDO9fMHY/YUsMWF4F6rq3e53LP3tAZlc+ZhPbCDB5fRrsbk2E2WR+EO7mH\nAUbX\r\n=eFE/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH6wpB2+EnA/efZR0OQeZSK8HDJCd8ulMHzU342XtOA4AiB75DDhFzOErXzn0Pi91wwxqq8GvzOULwksI+SGgPxo9g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.777c5fa4.0_1608155654338_0.2728198904999448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.635c7996.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-ripple":"0.21.0-canary.635c7996.0","@material/switch":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZlAYQJBvnExgWzGwdQvsNyaGoz5EZLjDDXVLfjnKDWOT4+T2I3MWiTt3SSR9+QZ+xCXSMJDOgH5T++nWQzm8JA==","shasum":"ac4941c19995a5889a30ac4a06f1023a8bd11c71","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+p1CRA9TVsSAnZWagAA8cEP/RGXeeHisORsDAUj1qK3\nEn93B2ZQhzlNmZn83SQ5qhWq0dG09r+x0QNg/56iNqvHHzLxSvyGb33Orptf\nZxDYpW+9e2cR3igsytbvCyToNH5+6SWWKtlBOc6gsYj187wTxjH9li681VqZ\nhl2HuSAKDnrJfncgQ1FFT6Lr486wjSxwtY3bvsPjRoRwFLDKjM+gxL0pqgQf\n8wgyKoOsgEB0Dn/2U7ykQ51MpzgitI5QIBdsQM5OmxobuawMaPzJShEGHp1j\nxbq2mb15lU5ucWR9HU2G09PaF3xdPhoM2FmfeZq3bUr4UPX3qVVMlUdB3T5u\nJUrnbLFLVLvKAOXz7gk5UH2Fy4kVb9/1Q3fn1nxJDxaiHfaqo+eYQv745wkO\nh1TvCucfFcQmu1dTtFjJ7tgCh4Sq1Ah2PSx/6jPHG3EpI1HNXJgUAVs5buxN\nJ7TN9Db7wyZGe1O+0LbxX+//8ae22Po8Rdjapj7nvfV9SFfRHddmQ2IQTapE\nlt+OMS7Z9Db6Q6euRx5xkdxN0AWzGkRydwHiDfMmuoMxGu4O2S/TeeugbuUi\nZBM1eOKanfr0uh1jd7TkrLGYuBIuXc75vVmVkDDglUfxZeQqgyOdFiezDPa3\nHN/bBjzRGhivYXksO6I15Re6nJ7hDRPBS1eTQDM9NmTuDBgS+bJDWnned9+w\n8ugV\r\n=dfb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGja5ubRxUmmgrPDLvriJbUiZAMdmQHCJyjheZ98Be7VAiBDSC/bZeUQD8/ivlj9zuRg196aAWply5/Wi5scquLUZA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.635c7996.0_1608247925192_0.4539586069089685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.20b0045f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-ripple":"0.21.0-canary.20b0045f.0","@material/switch":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Z0UrAdCDl8g9qgK/CP2M4WTwV9QvFvykrm0s5qdGkrS3yBNIAd/S2XPiSd39zfaoLOR0LgzjD5YNZGBw5Obq8g==","shasum":"42828f6d3b346da9a0e13fa28eb5ac8f056f1a06","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+51CRA9TVsSAnZWagAAA0MP/2Bjq8pTN//jROiWHCf2\n0gJBhLqmMSi1Wd489KZhG2IBFnJAzSYreyts/MLJjsKV4RiRWYC/TeneKL1y\nkjA2ucYbq4ZKW2N17jxVernRLKq5GnD4htw52YRb7QCs3kUw90M52TQZdwA7\nvW7SUROWa9tLcE1MW7bcMhjl+2PrBhHvez1UtwD+AO5jB1s6hCqLY2KX+hn1\n8LG91TchOwmBbnLTHbVx6bmnUJS/v4jA8acjUJO3Zjsahtg4G8suEO5YHkyi\nYD8dhHYdiuTFYUmcSPkk5cwH16jqB8pOqmKIwM+1k09lbErivduwWHf63bYp\nvpLLgcOqOfwR0uZ5G6byuq0gS9BW0OEerpDPBl8FK7go6M2XUURcAwUPrDw9\nu/tqOWK+0fJDlFaZE/85eC7UL2QuAApqByHJE/WUQgbpMCjBe0K2jE7NHMiM\nzQffi/CkYUQpk8bKzBKe2gcNvG0hSbLHWPTG9F8lhO2QD8QUIcvBkjOyTx9B\ns3cX+VxciVMfWQTrwg+EPaC+RxBj0Ov1mlj4OiqwLnmOZNojwp42FEu1pQMi\nhNRtf4y4e+jpaVL8AAD/r1HbNclHsamdOgeD8lzXZRO1lQkrYy6AgX/3wbUq\n5d6R2YtwsK3xUvdZ753QFMZSjs6saxlB+PvemrwITZ/NF0cwriqwrR1hdfsn\nFqxK\r\n=wE7R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDskWCahMx2pq/gpWSUO8WLhgKOk5d3bHYgRFrAdXkPeAiEApVfi0pdoNb5rNvknPjlaVCnYS2HZyEfYys7CsQTi+/Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.20b0045f.0_1608248949125_0.7900120595405409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.41f77000.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-ripple":"0.21.0-canary.41f77000.0","@material/switch":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hKoC6PEdoE1oYIv8FiJBt+GOk9T0+Fg0jx11WnTlSJmRS9kv2s5DMmMMDp6pLyqR6Ux8sa4WMSujv0J3DnMB+A==","shasum":"27535dafaa0469877936bed907af8877e5f331f5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lPCRA9TVsSAnZWagAAQ2wQAJAtMzX0wKrNjtkly+Dk\nLa7XWevBzaUULrlVbwThucDlwMWm3eXLPE+GVth6Vs0yZX3waFLy23LeXNqu\nh3sN6qmIYNodjplvfC4Qj+vEOpyQVqvMcRZOZaixZa20NleCyKx3j1CncbeV\n7duNWXCRlUB59lSSat1Rttf6oned5fRmY8DZAVNbECKGA+mne9HACXHGMQ+F\n5PzHg17pCjd2aRQyRyj64GfxevJq1oPEzuD6dJjMUOSp1M4dH3VOlUzcxGgO\nFPKA1nrqNu7y548Rh72tWqJ0+cYSbur+9MUoKAEjnFyWwkMhw+ZLdedyFw72\nozCFDHhKe4dPxy38G7NjOB83KtH+VqqVUGxzka/ZyCUJ3yIxMRO6t+6QZAh4\n8Wfe573BvvIgQKG/VEYqtQINp1tSiohKsEhlvlgKeXppwz5hNRyA7Q+80Api\noFs0N1/lK6Pd1iqffp6MqTxOPWpxChKLqXzJfuzVYG/YvRMOuEul1xUmfSKD\n1hWExGfoYQ9vlXw8I1FM78SGMCDdAj5g1viAj25kH/HqZ4H6AMDb1ZXe6B5m\nSSkCB/ndwzw+/vnawiasaVAnRz94X/a47Ri4E1ktHUmIVm9NKW1+4+J/6Jp9\nZBnrES9w40LwXnVp+QbSuE785LmOXqju28pL1cSO1UB6N+gyLYz0KOPxmkKB\njkz6\r\n=rC7I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn8O6dgOTP/wKUZ+mHVItUvgaomglbi4Dzb+cZ3FmpmAIhAN/dkLqMJhO96s24lWKgM7/lZrtqFQ3HGDAJFU5UXEUT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.41f77000.0_1608251727464_0.38262864629037785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.afe4079a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-ripple":"0.21.0-canary.afe4079a.0","@material/switch":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZxPtk00sN1X7CbDkjBwldSFivc2ojWZtO7UMo1xGWrifjxyt0S9k0vQVos4JD6AvIuV5rLek0Dll5Wmj0I6SGg==","shasum":"e7f5ee1fa0b4e140220a1733858360e97282ff18","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9xCRA9TVsSAnZWagAA9EIP/RMsIkoKYVpT8Ymco46E\nkJWjYDrJJVRRHqgJvgqAyrOtOt5DhS/+KvmWOG8zu8DMGELIlWIdhAr4Ev4q\ntvzk/BhsnZAuN6wPfBOnjUQajrI1lAxloyZZir9EO4tQ72GaajdXO/gb+Wd5\ndr9YkepktxM03ysnoOcfR3x/VIPqIHD+9lo9lEnzOCJgJWp+uWYgRVTK3Ycl\n1X7qj5edIJUtQJAk0VUaIgS6VAptbaVGEE60rtRQz2Qjr2QFG/6gNQtZDDYb\n55FDJp0bfegv3KWZwv/t5ZCm2ugLF4ahN07X806LBRhcdPf/QQVVW4jNYAbt\nIFIerIJWuJfvEcBzcuM3L3Yz0bYOE7hEKOcmQ09J5O1DFDoZb3vcgE8NJG1j\n6ydVZQbwInEuZ0LjVQQM/iqstv+wvTV6DggMU8y9aOpCviPSR3BGNuoddErP\n7SEbsnONukjMzzUqz5NQB4XoMrpRinw4BRE69D1CMRpmLgMs2NxfabWMoexe\nxekxahkCFBMzmeOo+PJcNW05aDEJECCi0Ekl2tnEglyoloi4CL/+PyhDLQJm\nUuwS4f0WmXYZrwiiwlLF4ttfeN/lyJmnajMFXaUQ1LEDmaoLaQYojoPgLkqQ\nT1JIvd/lp/iG/LS92Zv/5DKIDnsp0Z6drf07vLA8V+s1J8CSTqUOcTyS1HrP\nrra/\r\n=CXmm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBoNcZZ4AeYv3mkQcdvPSVt+F9M9ozofNiOqjrNBMqjAAiEAqwuoBDDyui8Yjej9CO9G8458K3W9l/3yxLW1QLwdmvw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.afe4079a.0_1608658801089_0.35122895379757857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.407ef8f9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-ripple":"0.21.0-canary.407ef8f9.0","@material/switch":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.671d72d95.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MLlqaut73Q4nwj+SV+jd8eh4DEgQ8XvSLEhM0JVOcfXIldBqVWZpJPhvcCQvx1tU4E1jc9JNnje4Zw3je3Xpyw==","shasum":"fa1c2047aad680a1a3a7d05d5288571ebe0fc5f3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcdCRA9TVsSAnZWagAAxukP/3Xwl/6Lt1KeIrq/3MDu\nM43e3zzXHW+EwgOSYJCINvuBSXUy3P3h1B6ODjEqIQApCJo//qaCMsa7nMOx\nLY7yKQyQFToxsP8kkACie5n1jxeiXfpPwalVbhTGZFUI9CJ/ngIJUz10iu2o\nAic/XNCwmejBYreXo8zhsCsQ2Zq9rV3RgSbt5uoER7uV/Y0ItIpwjDLl8YS7\nqFp/UFjx2Sf4lcyelSN3Bo/OJJq52XkYFfvkvOK3/Hw3pU+gu7KSfJs5RnBi\nP+LXA+Wrpige20KmMYkylDi6ZccQNbSofHrBL67OOtegoj7JQiJBKsoehwco\nLvSool3sHCUob1T7PjFfPDGN+xd0kAv03AS/doqjpGdc+pYYvR/g0qr0JhKz\ncXbhhsT4uTvoHEGy8Bf7o0TH/Px9qYXa7MQAC83h6efOG2wTpysn3pIUNeqp\nFMzEy/GwmCTUsUHXLiMXrkoglwuQSmU1R43Jwgwh702olpWj5buQ9NC1Pjvo\nFQpPqW+8TGFOwJon1IzABnZCEZlVsQW8N4/qhPHPQtX5SfX6EIoqa59GP9ct\nq9ScHzNIeRVCud/kmz2VxKfd6PGa7pS/CXjDOypZGM2R9/neewHVrZ1pIDo0\nBURS3przyMhe1Nj+yrB5OZhGHxPa/sJAbydv0mR8LbCis4S6XQX71Gfm/ag0\nAZ/W\r\n=n/Y0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAYz+YuoZ3aEqX5uDPfGb7zrAzira4OiuhltqR//bzYAiAkz3Xr6uExplaE+unxXP4O+0prEMgIOFRcXKszzmIvMA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.407ef8f9.0_1609369373318_0.39431605407582815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.2e26e137.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-ripple":"0.21.0-canary.2e26e137.0","@material/switch":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.365c69360.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VZI1rmsITHRFkv9dyDJa7dnT+VnJoNkrbN9rwRxDcIpJX6Rut8Km9wESWoduFygNQMtDoVJF0+oZCORtRHFGRQ==","shasum":"9c26013521697ce06736e15dc3e339cfe8647ba0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTOCRA9TVsSAnZWagAAN94P/0Wmvk9a6lTmQNAUSdv7\n7qclL/sYGLIVS6PjjwXkv0jxb9w4WBNDrie8K1/F9AKez2LFOJCo1MI386HB\njFAewXdu08mwAB9vSmA8n8aOLlC5KDhDWOmqBHkAky2g5G2fdoFVwJRDMMj+\n7rHNmSOT7I9CqyBrlaB9qn0UBlaK5SHoZA6qA8zPapnY/ll8EKMIthkj2zlL\nB7IHkyjgN4Ozi2HibvU3vzEQXQZSUnFkdPX3vj4xYTilp370vfbwflcC1YUx\nFN+JOEu1fgyDDFhHorpZvyb+2/xN25iOlcZY5cgIl9cA1tEZuvYjuqq6uYGP\n4YWltGAt2l1kpS1RZRSyQvfpcT8S8p1Eyq3neAzl365DTUtqEYqxi/UMfFU0\nMoSKr5KX27zcnuaTtQS9B78eVCbAp4EJ9M6Z5EjpHgFT5D2FFSStizTWoonc\niUd+ZB8Xkg3xYJ6mELqzMaQDhV7OmJ7VS3CsEQ6sEp96HPCPZiSXiwrHY/41\nYI6gYEULX4oC68v9SMwYtfZZsgMg5Og072kPwwhoKstdosL0+I6VorQFhpq8\njje1TBUsM4WNPHf0d+St5yYe7SXwEQqvMvV0rfYmuCslovW/xaSYd2MQWnFg\nR9yQfE4VRyyiGu9xD9nHR4SW5DrjUDKyTfVkFk3J/Vlx9quwbyc1sOTU0tlz\nWTTb\r\n=htkk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8CcPdjaYZ8TR8H+R4Ny4cEtXt7pPfEklzkL6joE6zrgIgdv50n3oIc7l8gpC2OFIEUDGUmbRR+IM3nB2y5c4Tkfo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.2e26e137.0_1609872590561_0.7843202318533127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.9009f6c1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-ripple":"0.21.0-canary.9009f6c1.0","@material/switch":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.abdd10065.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jDRT18k0sRqqNEzwPd4t5Xq4mh0QckTTPUOr/koownCQpFb/8aEc2J/PY2+84V0yfrFTJHS0ac1i1qN7FiMN7A==","shasum":"ea5b7268aa7aa9050eb9c8a468aeddb4e6e7f623","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Lh6CRA9TVsSAnZWagAAKkwP/iEpNu+7ehKzMIZ4tR0H\nzZJUterZ43F9JUjWFjHU4iqOj2GPjH8a7LllaKw38QcEpTML25a27hED+8oh\n6ORG2QUr5keFJj5vjybCfW0RPhqhdDzD5uLYkiMxqAhWYc345pQnfZuQYCpO\n/NgBRtmhk+8bSmHdegWu56+0nC5cUz6KWYiE+2iUBtsFa3sAwVt8SknGJZHL\nFUf1c7cJrAVlsqKI7mBev1ynAV6LnSVpDSVozuS0f4735IWpvQclsfNtcgIK\nxuAtjFU5u7ZNtcu8u8z8zcA3k/9H2MGEn2d8AYX4QWFi3pTqBtBP8hhkqPiL\n/O2wGPQRaBPcJn/ttbhP3MpfXfiXwQWa92oHWPV1hMfRvqr2uD7yWChyhDH8\n6HWCQJznQTrISuxvm+ESB19bQpQ3qnk7Fd2QhUfPQCvgJMNcbKL+ko9ONagk\naDkA5goNtUVhs4VtlP1fIx40eaBFUTxz1zGdwDq8a9K0oyhPCu1AuRYmRKkO\nACo0oy8loRiTwPfDLCNbtq3vWjTEjpfTz8hhmclDYJDfCbU00Kn9BuM5DK6Q\nULfrntjcZQM0R34Z/Ei6wKVNlzhiudZFcUS+ikSc5d1zgAdAcu7EcQ3FFOgf\nxYJfuGiD2sB0v9WSIdv0I/7frzP5/LUvlyJTWdX9JfN34XUvDs8mn95ixiX8\nPLCK\r\n=oJi/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUTpeXTvU7abG1h6VBl0IK++0t9iQWogqWe9zm5DFL/wIhALbbNdfIhiBDVgUZTJQ+/8Fsbm81hB6NFWtSJ7EnD6z6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.9009f6c1.0_1610135673502_0.6841120672515055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.ee99b646.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-ripple":"0.21.0-canary.ee99b646.0","@material/switch":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b8a1a58e4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4FKdV5/GCiHF+uHMmI1QJoCmJPtH6/DD8B5P3XK6a8uS+w4RBStRDiv1rb0V82NbWC5Qcw077PrnHXedU/sTRw==","shasum":"2c7977ab2412f9cd4d22ecf01f0c17af8e384b49","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpqCRA9TVsSAnZWagAApCMP/1KJSkq2VWV6nyh6apmK\nsn2oIb2iYdpxaCkrVTeMApUO7BDO3FYuZlJMUCzrwbFVo//b6zXD9iSKmf4N\n/U26fmmDnDrEYRYjWXBgusJBNYKdbQbzkRQiddJBah1K2aRQF3Ef6QY3w5Fa\n7XhdTW3sfw70XPyFbT9zibRDbQeTtda8at0jHoSonjqUeikANKETjDYuOCFz\nf3cLdH2fimuujcsWu8E1thBQs3LjG1nK1iU9bdZmuE1o1a5jG9PVfrRNoUIx\nR7gQaZ+uWcakREZt6E4AQJnJF62jZQ8xbbJi2iyTeAPaANVzgzoNp8xUZifw\nQcqbgZuy4+iZ8gSILZZ8mwzv7O0fu0TwdVsfPpNFz2+VLQ1fR4aCB5r5CcQs\n7fQWSwsldXkIdDNzc1cr3G2cwmuJs3vcfXajie2vbu1KgrkQ3wck4kKSiQZT\n4sbB28qVK47uOBXkv8KZFhfKcTw+XATQWmeuGb1tUPO6k9k7jY0BAOwKpVA6\nM+fitRBA1mOFCRqzrHsmnX7lr3CPkVo72l1FxqwApFpyylVvc192zK5IaEL1\nsibfKkf6htbM/8BtQcO0IaUSBHRwDnCv4HqJHD2BQJV+FURTbuMh2HeUgvit\n6mH2AGIyq7+wRbHXB45qU1B34iq0PouJgLoudrgWj7xhN7+bLZjyYOo2DDNF\nTje/\r\n=rudJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDg3qrRjnvb8rgzsxa70gRAP0vDYYxzlCOhouz/RGGUVAiAfuHURKmMjDmO1GdTa7aGPezved9Enh2YBoFZFPdlU7w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.ee99b646.0_1610406506166_0.6698565536513938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.740ed33b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-ripple":"0.21.0-canary.740ed33b.0","@material/switch":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-t8hvnazrVxbmCQvwhE06Hm2ogkFnkbq/l5TSiEq3n6BBVlaosAlbl5Z16TS7RWvd0mYBnuSdL2pyf3RzlIWrxg==","shasum":"54f8fd32911568f91cf16a8443cbe047cd5dd113","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSiCRA9TVsSAnZWagAALXIQAIjimTxhMjKDUb6MWtvC\n1fTsIf5EW1fu4Mcbgd3oD7nazDTXCIc+xo7tCAvtsu5hw+tAUozilQqJu9B3\nx9ggOOWnTHeZb9aT1nM/CWP2WMJgMPkerAiJI1EbRQ47cu3U1l1SqB00jeg2\nxys8//Qn5gRTUQzQswf+gzIurdUpfJzaqFcyb7XMLcFKnH1h1o+LAwJOaFBh\n8pl9m40LRs+Wv+34XPUYx8/HV+ZWtqYhNuJCt6ZsQNQLHjSQhweVWqPEANvV\nKDX2L/84+RvvuorCaMUdjnjOyuq1nL+KVnv+ZVg8EFQ9zDUyuVhKISvaY806\n9+hJUZR9aS0DVZqwmSbvsihAn+V2waYafOPzvfSGW4H1Mgws8x7f3W5D58pi\nM1jvZ77mZaJOaMriMLFNb/7OG0wzhTRBurSuRD5PEaxLK4/kJ9w50OKyQ+70\nlUHGV+9eEfZODKmG/uciH+Xs4gv8sTSeH4w81yjLLlweAyV0DyBWJsQDygYr\nZAXUTPEqh8rPeKkotRUB5r+dsNqpRpEZEa+Bc/m0c+m4oGvEP4M7d8hmuOx+\nxigPmH3cfVzHVpdIECv/eS3S8NWhu3pS9uokISimkrjY1wh1aZUmIkXkKldV\nVzMccctmowMLvBFmuZmhZ+LM7LoTdZzmkT7iJIFgrX402wu6XXT/4VGfhHyX\nXnby\r\n=qkZ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpMJiOxmqBNdnmh36oEkj8eFrnCfgqIX6hEc5y2E9hvAIgSOUhIJewkk92xXkEyaNuTmE8nJTe7q18OrZp7d7CukM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.740ed33b.0_1610474657846_0.1921016368350268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.c5c541b1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-ripple":"0.21.0-canary.c5c541b1.0","@material/switch":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jW9RGnUjUV0v8HUVobCNJq/CyhOYUP6N7Euzqm5GehIsyp+ezSMCANzDFvP0MyU+yBaaFIS04GCnnQaG5qH07w==","shasum":"19d1abf203baa506034cf514dcd0c681fc8099bb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5ZCRA9TVsSAnZWagAABQAQAJqdjbsC522zwbAtXXsb\n5NTK8f45J4NrVSL4ycrmPK9hfIt80+8zQe+8yNbuozvIwJ/19n2kGDhJ9R77\nj3IblafH/gGbxXkeBLpTcWLTd5C861yjwhnXfwqiJ29L5tA+1I1umkWctUZB\nVy956I1K32MJ2L5sOwEwQVZFeVL6L9qUBp7QTK60FU+Uit2QgatgJVVQ7SZB\nfrt5QmsdNCPXGQH8GwhX6bH1RPB5Z5EYxSC+Fw5FX/PLp4xGw1kAPPpsDV2w\nHyupxPU2I+9bSHfwXA3d4nXx9CshVhTEfP9a3i1V9kIbWFr6lHTqxsystEGk\n6jnC+JLJovtU3QD0Rht83SkSUQ9x/TtjAcZYxokPrnbFOcdVWmZynpCUSYCm\n0WOUCqOtUwIlJa+jYSwlVkmwAVR//QaytexuWlHJCz7BxJ5rZJAIAamu6D/R\ncBnFRKUeIShKfX2XAD3+fRf3IXxYUGZllXZvP5Qdpb1oY1+LbaKp5qs2LTTv\n7VNyktSUpQHQIQIAj/TJm/A7a2Iu2+AQZNQkaiMum6XDnmuYh5YNYShSnawg\naPSmxzxz+eZcRuIDZtOMN7wXbUsq6xmY+e1gYXW+vRaal0hnW4G3MC7NNc/0\ngRMt+NJNI+9jJSllDBjFJDf8YDJB6nLVjrEFGOaM4K5FxtgD9uSSfFWwRV9R\nh+6q\r\n=5YwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC3Uh7Gr3Ffo6ObobpBnvCC4Hpb/IHqgIkwS00w854xLAiAoO8eyYtxSW4MyCWFL46zeicbJcKqnY+S0zSnTXl74og=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.c5c541b1.0_1610477145419_0.13835791860613167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.06fe9d90.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-ripple":"0.21.0-canary.06fe9d90.0","@material/switch":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-L5ks6VdH7F5jt4GjgWE5jN2Hsydfo5nBCc6Afv7sfYUSAqRfYd4y4TSg/64ZUd8X/zJhmM6oBzILl8Ffnv3MQA==","shasum":"d5d4fa2801b3f420e9289815c5ea58949b7e93ae","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gyzCRA9TVsSAnZWagAAXJEQAIFvKVrZIgw1EKadwAgj\noiY54UjeTFG2GTRUVhT1pObkkpKdN9MyEU6zYwl7j3vEZ1d6Jj/3iCdnoh6J\n3SszDDH0rbApGYj1riX3QEIrYxgOKo3b8trDJtOchaUAsUGRNAnTGRCGeDEy\noNFJ+02oryl9b38G9CrKwFtXi9sIfeQ7RhmPuFK/xxhti+Rv0nYouD5mbus9\n5KTRnRD4/t6Vo8iKOtO0DL95ipURRyRtQhl3oLBI+IBq+bqHRZXI5XMg5riK\n7d0vtt70Hp92AMeTtTdY4QhKL6xlNYajqShbIdmhjKUaDFmlKoQqWvb7i4+s\n3Ya6UutDSskngRpa5/LRYOUJ8Bp8YN5fFhjcD3foV48CVX8/juCCzHxMZayP\nc8OJat2gu1t2nKkhkx9eihgxjN/XnAi0e0JrPo9IiPWGOU4L4er5AXeeP8cA\nwbEXgOmy33NUaYoVYy9wH+0MnMYavPqVV2u7QOXsGgiAO7invx3GHYwqiopf\nPiG2YzoLWnn30HVAu7YXVGDkPJ5LpRDpFzp52WB30fZsWOIyNAmIuXZyYjum\nAocF3QZ/oBrEOMrgjURWGOOOkGfkucfnfrS8TQvd8ckrzH3s4g1hlJSJh9R/\n2HmKHZzPuE00g0EcGikmLpgj9+iZiu9vktw4T449rhxwqx1xwVK7wDCVcAJK\n3RAZ\r\n=WzMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnxx5Jf7nUcIHg0cqqOvSgEGwJEL+PSScg2ebaHjuDBAiEA3Q6ViuWDm++Nv52aN89S7Fj17Y0x5P5NAoXeiWD5o6k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.06fe9d90.0_1610484914759_0.7860057194302763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.269eed01.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-ripple":"0.21.0-canary.269eed01.0","@material/switch":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Qk3k/LuZo9DCVMff+lWEiLtGkdTrYYLc2aYUAr1bxoZboC709wJyWPpFa7nLY46MkXWfeb6VAZVo5HQzMm2v4w==","shasum":"6469d48704ccb3bf2eab5ff1816b7c1c0523b22c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2n3CRA9TVsSAnZWagAAijUP/jLsl84UuwAktYteRRjZ\nWgxD0TfpXlrRldJ9jg4ufGhLY3LG4J2wk3AuIHP2K1JNykMIOUzZVRVxhgos\netvfHo3Jpe/mXo6AAjZ9+xiQK4ipit4/sjWM5VoEd/Rc67QPoxaFOCfg+jWY\n/TGC1Mcs/d44o5d4WB/VfHE291Rb7YkZANQUz1e+d9rzB2KAgNH+INt45bfM\nuVFLPNYNyzXDiyT0Atrsuo+FJ0NiWEPV3EOd1e1ohPetnM8mT6iPwMufjewj\ngGnZjbcseHBbyPkwsTF4IvrDhDy2GAdcadcbJeJJ0axCXoGtTWyrxBvE96LW\nfivhdFsGVgt3EuFQtKi9q2Ymi8eQxSfIoZyIODjxbENxFAF8blYZivUhNcDf\nPkMqifwYJiGoBGIU4tBPiW64WsNIbcFEkyn6FzAldmErdD6WWFx5xFQv9BCG\nzN+Dm9Y/wr25yDY3kp5J1/bJDtr2YAqY2hYps/hhWvydgy6WIUuZBZiJrUNm\nbQQz5z/NJOWlGDLZIobr1VzS8o9xm/in8Q/oBtrgdidAnXalvMwpQFtp8vh1\n94jEJVQcJq8mSnEJYcpE23c5wqttX1tbXVr/REenfE2j7hkoUi8r/uFRn1ob\nwgDOyE1GwQAE69parlPSFz9602lvPpII30+lKECM5XbZp8y7+zaF91P+TLvf\nM3ro\r\n=EP1V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvVjZFETyobdS9MUzSG47Rt/S/zMdhkbR9p5wdincsCAiEAjZEbrQUwtLkTyAeJXjfV8dGxuIjQumnHNg+3YaxIYoE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.269eed01.0_1610574327292_0.9558367213513383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.8c075f35.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-ripple":"0.21.0-canary.8c075f35.0","@material/switch":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gebqukzdm9I+QnqTD1tRy98nd1rYxVVbdWfN/v9DFyhA1keL0Rslr9kcSYpniRHJWu1DgteKMm8EYEUOvX0Ivw==","shasum":"f97ad8af641ae0610a22c3bd28dc12b4aea1a176","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30tCRA9TVsSAnZWagAA3r8P/AiQldthxIuDu9Sgajt8\n1LwjdilaqB74LWr1orLJq8Cz8n9aWRUDSWIrb+tOG8zjdf7J38vzOnmCu3/0\nvgZglwbToYgNQFzpeGHWX1fAJk1BhCC82MAWDYlgKbfZ3KoIRYpaSQJyWrEZ\n5nNoBldcBT9NkQqZCH0pYfztTbilB+Xh0962kg3Sf2/GTAh/mE8AMjQIsZYN\nky8PYs59isDrGwv4cMeF2ydjt+Lb+QgRRK7WMzbsCVY57lDk7w2Ggy0F6XPT\nEXONSauOWVIO13meYNHxUa8rwB3qZbtcxPzoqXzxaiqBFz4nNa31b0AyGEpr\ngYL06BcSwPRQsoyLbq3ciEqT2Q4L9pr0ydrnWeoVKBEPy/X3XcEh0nBSIsTt\ns+Y9NccKRHXQ+9EIJ1YayEPs/Q3rcRSbBwERrf1/uWq+PJNGHjUJyELWLTqb\n6W4R2HiZkWvG0y9WGpnwKsI0DHWqBVr70JpmayZA576+gJ3se1jRk1sK2WUe\n4ryb+wmEPaoHwZsi2CoY9DF+mTkSYbXZK29eobK4pU5Hp/hCj+suvTcrddwQ\nWWWpCW1xP2D6jkEgxaxLYrfUqNMKQ5lWofqPTwcq1juBA/jRP5ymyX8lnSve\nuLebt/ir7+kYxHzbKWEAGGYEld7W6YVfMPC4lBGbYOLVMUZKigGq8fxTHmHP\nG7S5\r\n=vyYQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqFcGLOqKCUL2sbwEXlmlSGjtKWAeqqVauWD2ABsGNLwIhAIW+LOpxs4Bzx2v620Osj2Vs42ihaB+wkpvrx+oHeqkX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.8c075f35.0_1610579245158_0.9555059061851661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.3cda381b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-ripple":"0.21.0-canary.3cda381b.0","@material/switch":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-I+ipyj+XNjxfDCLus8/8EqJ1x1Flz/wc7X7VUV5ar3OAWXW5CfckffD7ECJvCdzHluh8N7lb1THsUZeyeJj0wA==","shasum":"58e6fded4cc34c5852382a9fe20fae4477b78295","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qdCRA9TVsSAnZWagAA/jkP/jVbGvQa/r6k26mtX/6Q\nMMLe5qpE3F/8C+3j3uAnoyCUY7qvlxYIgFsyz7tkadikaYI25VaZIcZKOLDs\naQlr94H8umVP0d3LK0HzVmSxEK3y4fHhL62JQbrNilyiDuCMbh+XvdZNFKcV\nTrtsHlO0xPa6iMs1/4WNoMxDIkIrGK1Wvh1vk49a1yU3Cvy4iAXhlCS8mOH8\nzIfdCNUbOcJWatlAjvP4y5YMXlARHwZB3KQQCM6+BRYtu+oNOt3n5kG74+/M\nSVPHDA7/akTRWYLa88Bq4Vj2WM47wHbaDc1HW3A58DhyDE+UZ0yoeTtgRJ/g\n/C+EPcHVhD+vRGi7469xuIIm2thZrWPapziRv0lGqdhXsT7mpZSbbJEqrEYN\nNGHy7eg8wimu5GV4NonWETG6Uzv3bpun5A/yq8xZHvs71a4ddM/8pAETWPtg\nKl5ClOztRFfY630l+5b9YVKPcG7mkpLiaDJ4IggCiN76lnl9qOTaX+DriuZE\n4ysCxLzqgoFALoEY+5PWoNs8vR7dK0YrFObau1SiB51j+i2NZr1Ds9xNCia3\nZbXDbqaKgUCpGgdRvab891PgDjSxvcvc3DhZble3I+CuWy5zBEk8VYwPaH+1\nmwR4GQ0xiHdygTwoLQinsiYYGakGu7HUxxC59w05Uu/0G+x6FWy2GZ1uMKJ/\nU/e8\r\n=J/av\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoPYdDbv4At2pLwgN+5rn8neTGocvOYP3X6vAeogH9pgIgbQvKn44eo0dnkbngHmOkewfyyhz/M/80p2X5tulUYXU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.3cda381b.0_1610582685533_0.5407554280552016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.bc113605.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-ripple":"0.21.0-canary.bc113605.0","@material/switch":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.772cc1068.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-U9B317aRq7X6WvOyfqRFm6l6f3pzvWc8P9Olb5Qtr/ETp5DmtPh5mSHopSv3YdC5rCDJ9pTp/6NyG/vQs1Gv3Q==","shasum":"5ccf317f8a2eb9858adc9c34ea5658da126c0c1f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QsCRA9TVsSAnZWagAAQxMP/03b2JQFQv6wO5HsSvjy\nkuJi1oBfSPHPSvVYH0iz5ARka96kCd2N6yDVOUE8tAL7PpMD0RzYMUHZfL/9\neE+USjgsJIAf3bjS8K3Uvfd93tjksUVU/MYsT3nuvfuTBxO4ZemW+bz3rHpl\n0AUxragG1g+jB4pVw5bzKqm71fl3TlP9Io6Cf7HCwNbf0RGmw0ZM1o9yD9hI\nMFy5A9D1a0cLuCJeEiHyqKe0JyulxLlqyMN1ejC3HYWikkw6uuM+/GNZocxx\np5GENJmKQzhU0WHyFb5ffh1GPcVZHjalxefja5WeeqKLcAj1gAypu2jIaveO\n51wRTjyjNVmOUGsXZ0ERIRWjZudIw8UMhSeWQRDiWPypAPuZqp0BAOag5ssZ\nXJKmMoPUmi8EQ2I88PLOwfryOSuVIFPHvbBgUVGhfztyuqP0TO7NgQnoMr0e\nhPelkI0ZpsC1fyC4iU2HUQSFHiMeusaVATYu1saLfYBkm00yrRK608MMLXrI\nb2spzyFRtleAlivrOqKSRfeK/YeDg48wzGd8CWAASBCQdeRc2CjTHANbw0za\n2o9gNZHaSdjOq+O3ZjEQj9nJEpaCxT/D6Opv/of+8JXwJNzIZBsIakScT1lE\nugcDNPYvzU5efGmrVjOUQGWQWl8/V9ZFsHyzSJyFe9c16JBsh+nTIqdaTSPD\nMUGt\r\n=fjHr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjZhs9M/llxg3n15vIz/QarM7G0LA4Xx8CJ05Sw/MIqAiAD1aNuOMjyIThHxyuta+8DRH8rJukEuispvr8VjX9J6Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.bc113605.0_1610585131630_0.22179255153151045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-ripple":"0.21.0-canary.0c1d6ff9.0","@material/switch":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.772cc1068.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-4uq3TB646nXNKWTNIlMW+p6MDQ74OcrXGvvbHLr4cFiAduQ8oiwpZSepcLQ4K63BrE0Rd85Yn77EQBK98lR2BQ==","shasum":"ef96c04ce7f7a844bc7b8361e162aaa412844091","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZ8CRA9TVsSAnZWagAAKL8QAIQ7phg9pCtYYVI5L1K6\nHOJMP5L9RVfxt6hcxAluMq1IB+XsfxvkUpmEskxK63qF/kS7zv+0ZHGyq0em\n6TnOpAGqW23lMInBux6SVWHg/e7cCyIo12UmwqPQFw7GZGyMVFHWzMFMFDx0\nd6a3UXhvb4ib5AZgqEx1CoGwhvviY5yGfqUgrHa36+R11CpC52TTvCYkUmi2\nVMlaiuXMJo7UyvcKNYungw9wUj/0sKRGQJODYeBrTVd0dMcFGJwy1+oyuIwF\nCZNaAll2f9Fqmj42k904eEad9Yaxxgxpwtz4vqZ9MTWBt3o5Zy/4EdUxXyUh\nrBTahOZ0TEuqwastt8w56PNhbafjICTamdVStSPBMVR4rI+Z5Wz+boYB+QyS\n6Te9yFLrcUuzWrjJzUFKNknjF+bnp/dz3jA9XujU4f0vtetyYbZem95qINq+\nYA1F5pUJtyn9Y/1sOqQD8oEgMUBEB4BDyn7H7CkhEzTz+HGNVM8aaf6uBWfB\nFCgOk0iP/GXoxKfH1Ewd8sYsCIojdNmOQBa0p2/7zHsECicHn+V9s/xUonM6\nwOvVp7YeR0dp4lQ4F52G2MuLPxDn++UpH5KFNOJa8XPOD+ZxO3jebni4kmFi\nU8Sl+ZaTAszHcL9glpyv7qVXhZZ1cE0Ffkon4xTHEyosd0Bm803D9YKrHnhs\nkOOr\r\n=B4zh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiJJiCAatYeqvPflFeWmyL56IL9p+3EBIN3cXE/EH96AIgHA7wiwFFe4J0knxEO4i0phTevj/GFc+djfIyk9kZf9c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.0c1d6ff9.0_1610741372182_0.32958563112730777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b4332e00.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-ripple":"0.21.0-canary.b4332e00.0","@material/switch":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-sdPE0qw+APhUWhf1dbSq2YXPwQo18i7eh0TH6/7Jhnzl088VnRaIxyn5nnG414PLN7qMCUiIIF2dF1FUfcG1BA==","shasum":"137e0d277a4357674330f9dd35eb1d0855656bf9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIsCRA9TVsSAnZWagAAlrEQAIa3ghrRSc23bevWJkvu\naeurs0m8uIneZK/BX6xDlh7CZcxlVfu0hDunNeq/UNre+prf7IDgBXmqDVFI\n8adtktiJxr+pmqVwgDmYiz9qZi8mHVsDAdnUbmafgE92KKIAYRuok6vo0V8g\nU1ub5cl7m8lt5YPLl7YUPG+2cQrR8DMQO988QDI+rNdNIasKU5wbuLYoElRd\noqyO3MYdHAtO7txZu0GaeDQ+w9dQs89v3gn6Wt9In2gJBWqMcQQXTwibxUam\nRaQn6LtyNLNL7ws4fpBo9vzQrjFcISqnEQpGCmRuQQiucjsw21beCWrFEp48\nmbkxFjlgwBP6zbdrNTsgO313xoNYWU5Ogq934CNzSj4cd9MTpBacZDSGkpHS\nC//+ECb664cmyNKbQeR6yAxhsBUdupc+U8sg6o/hGxeaF34/fojAsYhy/V8h\nOGtqU6GtYSehwFNIIAmmIXev5nMTkSliogxsZn9lvB8hQjEtnG3fdqR4Kuoh\nOBVlVKsN9U3LSu1KJT1Qdf65/arO6bW8amDmUM/3+5cO+LhYMVYlb55nN7MQ\nEmyCeORYASLQ5KuBFAAAxjrX33AqmEAnygCr1Tm7RYlwui66ona8EcW3mG3J\n4Ty6Bf75wm1P3m1qE7U9lKSDxvDRG87voG9/7972C109T1yIDa0zO0cg86cg\nGFyM\r\n=vWBh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN02y9KInZHdVrsdfhZwjVZyQ5yXS0fbgnXDzr+OBVeQIgKVS1jQ6rLG4CL13M3Wp6zxAWaYenQC8YYub/Q4fwDzo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b4332e00.0_1610748460265_0.8940337895425139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.2899691d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-ripple":"0.21.0-canary.2899691d.0","@material/switch":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-9w7TvjjuytTz2ksHqXkwgGD8skA+VoO42SrIg1Pgjlo1oJ1PtIlLyjF2TMdbH4TTSe9hl93O4UT4ymhzFqPFkA==","shasum":"425dbead7cc111c55a11e6b690677a1a3be11047","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUSCRA9TVsSAnZWagAAXkMP/0zWyEKdpwPDsiO9A49i\nMDfwYM8c3zZFBeiTb8i1EYMKVKNCgsfgfCUQoepfBW9Nv96DRL5sN9V/PQ0/\nUM0KdFYE9baYQiBHNOp2KMXR/pbS9m/mjhcThG1XOKduG9Q6IeAvV6sCwO3M\nHJVQLyW/k3oUH7ZPoGdoBGlIUd/QnJucYGsZQwG0jVNixOu///LlTT60CWNr\naFUMuw176rHXzXB6hMC83lUQNxdJwysUMda2s/a+ezS8BEfeWORmMCw8vGnX\nHrPe6x+OqW5L41TfBXBIatD6a6N4XL+CPydiVrk+GXopg3a1WcuGdBWN9cHg\nsgyGt1lAyJ8Wj9kctBX27jjfmgvmw+sBGdFZ4FEyleRyun9NSomUzMlBUCEc\n9aF5xD6eDuTRyFk1jdLcC9b/8z+yNB+YKmian561Qt6zv+hijnRl3ZQ6767B\n1Z2CraDxhArLDd/NKqQL9NRSiI7hMYRFqfigqMES/BXvy9IubiyzxsfW83eP\nvCK8Zf/v7ZXIsQ6X5KIlnfzpE0eicxl/5iRJwdzQZ64Fi2UsogzGbjBOLCSu\nz0JInYmPM8LRw9PRYljGcZL2bspEQ0RRBFSxRk6jjJnJR3faxpwlL96CotTR\nl+FY9tJ2K5MMw1vCftwQEUc54idH+PUehGR1FYNaXcjpaK1n6n4P9HbQrSVG\nNcKQ\r\n=S8mf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTsVE0LfN1pvQQEb6zz/tCxlkdmSWPtCK6FmFtxlmnZQIhAKurFAxLc1UH6SFUFpsHY8WxSpudJ7RmTxpnfLEbWF1s"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.2899691d.0_1610761490128_0.4416342746861601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.fe73953b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-ripple":"0.21.0-canary.fe73953b.0","@material/switch":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-v6mL8Z+RsU5daYIbjnOOZiwpkQDq16ZLnDLA9FqBhGIUmtLfw3ZuEevh2oW6hsmMivaE+xS+39e+4PK7QCXdmg==","shasum":"02def813123eda7a53594e1599a719900ac31676","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzE+CRA9TVsSAnZWagAAUjsP/0CyTJ52wHfKfFQF27Gk\nZvPoSMYxLcXI1XdQEpPf16ESncQ9YMTbTHZfJWeoTg+6wGTLV4zVMsTr8yUs\njbyDp3jrbvwYB7HDc1geyudZd/PGDt52rSmr2eC8qxpxouko7C4REaz11bfG\nDMh9AM7xvDLKljX82nX09DNL4p5zy78kO90lks4J5DIQt0ICmMm80U26MHyT\nUvjaIge+Bv6nf9/jCdz9ojhU8zdkKgjuCrzmiCC3YpW7rvMXKkwtW52FTxGj\nJAtZ0dxlKqtIoo+renISTtjYX78dKXU7xyEFwccXN16blYQvfoGIT5uFVUqj\nTEuUmn0uC69p429vESMwIrjzbgse4hWs0Saq4w/1ARtOdOEe5qEsAzkh51Dx\nLavmCwgGplDKmiabU/GuWYkhE17xCvT/+41NWEJuCMWAuY6/rrsmqdvDOwb/\nrVpRu/7uIi51TFkjYEylrokrsXCze9XkLUfb1AkeydGYY72EfJMEycLyk6hE\nF4O3lAoaHSjqqQQrn+S0/3HbNSyrg074EhzzNMaO4SWmbqXgM1ZcqeXaEikN\nG/kdcdkTt/Q6oR096Qsfpl5w+xt7gOM2LhFrQXUNcZhAwAjntSEB3hEbzhj2\nH6Xp0WkXn2To3Wb6NKAVbPHsMSDq/+Rhxn02XTjpVODshkm/EnNvdrPVjNQM\nMUVN\r\n=zkxK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoPLV6pWpOZ9m2ihxcb/upYzXplBORtkndOZgVQIPrRAiA7lph2G+LDKqH2lYvjAbxYDwYoSZ78hxl4rBUN4WYqGw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.fe73953b.0_1611084094405_0.5748735448519395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.d3a16455.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-ripple":"0.21.0-canary.d3a16455.0","@material/switch":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-3seOnsnmRNUwYurW0nCUMNVffoWXFw4oyAC7xelCuuMViFWSM1jeryc/mcqQjDtAVsK7z7dkWGtHVwirVNSUSw==","shasum":"eb3f5b25a63caade8c00302a0a056cf7eab4f71f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBziBCRA9TVsSAnZWagAAMkgP/RRUvJvtc0l4dKcjvceS\ntaQMonzDCMlOgssn2zUs+SZ6W4gmXCVdwLdUhqXthFN7zW6qvEz6xwwP1sY/\ngB3fj1BkaDQa7awMkZT5/jWTKETejdyCJI1vMP2avJoqArNXWCewLDZBt5gK\nDXr37WwfU3lvAWmI0yQcJbNr8sG7t6HDirnm9a46EhOO/qic3iATlFXz8VB8\nv+44RZvC5fQs6svQaAHBYvlqNIcblb2MafUOBsno7qNAdwAbCZv6KyPWHMJC\n9h3WuTzAOPK3/+7f7vQ7rilRXa6k8kG6K8HFkgPS6jINO9RrFHcqaDXKcZSc\nRBrhQRZbMrfrCyvEmsC22wNLBwtSW5XlF6qNSaz7XQt7DPtmBVAeF76Havkl\niWpJHdHV9H3cQvfOuOQlkrn6jarfMTLE71al94yU1rhC03IKrdHvO+5yzXv7\nA6Y1GR7Uib2pl7a3X54MRYHxohSX5OWaHI4vvm67o7pAUGMqWA+lyRvcDR6H\nMOaBjLlMGt0Nfy6fnVfqow6zp0v1heVbmpcbPmSvVN0Akq2u+qyQW7Zx+DZm\n0J4CgXFK3gS3o5DeeknFfFSQrPFbLaxTL9DVYRTLHYaY6CgAf42t6AypjQR6\nDIWTK9oc1JaEyfCGM1yIQNEnEVj0Pb+YNKyN1PTSpSMnQiy5bg7tfoqxVjPT\nnZvR\r\n=gLDX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1OwKcpMeOhK7dbOrG3WPJfEtnRsJddR79srWlDrthIgIhAL3O2GO34mPp40EjptBgmqkre0LwchKdBCBBjEcgMbD9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.d3a16455.0_1611085952641_0.21956352215079744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.597ca1b6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-ripple":"0.21.0-canary.597ca1b6.0","@material/switch":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b2faa116a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-gp+l8J8jyEMw++Ay6fENwe/i0hFxXFrslG1nkYcqJbVxPGcc4Fd4Lk0RuV0YIXnkpxVy32WtIGpG1YZuzSty1g==","shasum":"4d08cf0695ca231fd55c4a785977d4274329ba52","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CPCRA9TVsSAnZWagAAFkQP/2LlSxV89zk6rSJ26VJO\n90OCEwTAff8luCVFwtZkbPkna82kO3CY3zYtkOw6tHGzTYJudMdskJ8/tZRx\ntCQvKUR/fIa9TKT2Bk32Dx4xrCW1OwwzY+M+CHIbozyuQX1Z2cXrW/VNhAYT\nXzXtgAJxqWoejWJuhO9x1QoluxTbnNweqqPouXX4zIXMkGad6JZmNufnziEG\nXOuzXFGh87p+l20wqUQjNXmEBIzYhod3RyYXeqQIrORE9BwcDZ4wws0Wlr02\nRHtl3LaZBW9GL8LFecCFK7h2kijU2iQ8kpmPaTHHOm4r9VSCM0YInouoYibC\nuoieT1xixiNvrN3uZixX1CxQdp0Ygz3K0MM0lF6DyuqZIRHBOoS8qI1Bmx0m\n9maIoOk29d6JuU7pq7ozoDU/34SFeOzFJjb3H3f3Bf+TBKZY6nSjFYacQ1uE\nd9iYb9faP8UKoRv6BxJiprZ9zXjP7BKBijoOJXjJ8HS442wgW3+rz0dVKnpG\nVXtoY0KfIFC2mjs9BqXepztQGkbTDl/z46KO+illZHeMfBL6wXG25HpiBRLB\nbDxDg/Jyy8LSjbmPdpC4FYJf/498TSKOzPZ7L2vCASIYIn+vxUoKZx2sMHpx\nZuNEpxhYNNPdcaglc3nl0PmAAyFkW8titar4PZQV7vIg8Ehs+hvrzWWjca4x\nz8l0\r\n=OO8n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/OMhuOB4JRwjXE31oy20bpCkK5mDH1nfLKto5wsk3vAiBPFSVnqz1u7gwr9M4pL3PV30tyNitKaqnpIexOUfp8PA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.597ca1b6.0_1611104399512_0.4589453364062188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.3c195efe.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-ripple":"0.21.0-canary.3c195efe.0","@material/switch":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b2faa116a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ZIgoGxNnX7VaNXgAr9H4ZvDyjAxIR4SXIwJbi+Liu9ka0j2sExYJ3/S+mpJuEKU63sItGyTsnVMHjeSE34oxXw==","shasum":"c0f66abead4da2f5d6f68538cf071fae16dd44fb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48GCRA9TVsSAnZWagAA51wP/Rp+YiUGz7vumHzfLfIw\ne1S11Aj20mNoYVyScJYmkcZfUvkQX+PBZsmVD/OM8CQVuCPGEycOf6VvHxPY\n5qhGgXcVamU3GVVP7VLGL7oufzqFKwK+ko3cvgJCHV2GmBvITH+Jb71S71lG\nMlQyKcreA14WOCO7mCO4QtVgJwoP9tzkz/tfQxlcPA3L7QRPPQb9xstVS8pW\noUM9ua3Ulo8paDpmUqPjPXjSqkyGBwsc2FOR00EDtyYi0G0gcQ1p8N661H6/\nDP6l/gXZeb2EgFJY330r0GwrOxa6tUZZYkAF+520v8t/jbig9LvIqvJ4SyvH\nR8Mtajx95KmuHsX9mnBtdWtB1NfxCEjk2UJ3vFKZrFD4KD/U0pfe5vjcyRRm\nSh2bcG6olb5m2LLoPZXSAkYYW078DRVQ8AXcySz63YYBDQ2zfXWrqrARqjVL\nA2O6Jg/nfTKp4hijdhTRDgyb3CNaVunL/ne/5lTrT6pDflsr8cNoTPrgG64w\nIVBRYwjkIGcojXVY2Cu4SHbXyDlpiIZ+iR4M8QwnSXlvM7mG0Cd+fk9v1cb2\n/zm/OsdNV9ygKiEc17P6aa71nstbqlHiptFoIqWJmMam7n6HBGXlbCWQcxgm\nZClPjQCOuw4zteia5eMC2FiD+Byw2jWeUziFUbJt4z0FssG1mISKvT2EvOGA\nPvR6\r\n=DdLg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUMnAvUyNtEvkpWXQ/+OIZMZ2hGMDlcArac+pdhn04HgIgQmSjYAjA0WeUoun3FMAFxuthn8h/D1xphPRiS8agvAY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.3c195efe.0_1611108101667_0.6433557416854803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.f7b8755f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-ripple":"0.21.0-canary.f7b8755f.0","@material/switch":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.0c95c9f7b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HvlHTQ4/+hpFaCsjp4WjSugQBgDw/1NtmZqeXK7J9G9M0aF6dbdcH/dEAa4uNtOap1fHVf4j3znr4gdIgsmpFg==","shasum":"8863c38182b9600ce6b8b8dc7ce0667a2b53fe1f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSlCRA9TVsSAnZWagAAlrUP/3DtO1Q8gp6bsgAnMhGV\nqNTVEhSStaPzB3cXWHNLDzEZJ2qVP+EEGoAmcaQXLghd8se0Yo0dQ3jS3rNx\nA3oPdibyvat/mDzt8/G3oDcr+1ZKvtqCXPFm8i5wld70ONY9b1qpKNx8DoyN\ndBwkHE0FuwTcjDh6Ndw0/FA8cpgApGYvuWtlNCmUW/KAfHlWeg/mW5jE0jO8\nhBlDuMnqdcEC2gmFOZFHBEBsqiER2ukFwPmHpGlBdkUS6UHLTof+/EERKXeA\nJXP9whrzKxlqzAlauiWOSxFQLU1avlFUkUqRFUOG1MNrQlFSx9fE7duhTay0\nanQF5ZRxiN57/PnOCC/w7a69hE4PFSDW08FsXWV8jY7kxFOdViWGvRIS6nrJ\ndS0K1mVrCSnqaKF69geq5A6VbYgqRgDfNdkAYZYLrib1RJNw/EaS8uPImFDc\nIWKd34c2bKPj2nAkKOf8jc8gPbQYUD8qCDlKTcSAU6FNlxot9JskUF5bUgDp\nRW8ogA57OUMVcsxv6UbYOleN0vhKbA9Hu4QBMLo8vAhPK1A0Zc5fpPkS3bYK\naniOIRxqHlisyE+bdvFHKB+BJZRcRtg4C/E2BgN8Ewdiqr7lwQPVPBbEKln9\nQ8tBHD7j+dgj1GhBvQRCKUSL9e2OVN4X0j+XUg7kqjDqQLCn5WtzwBILTjMO\npntu\r\n=HEGr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlbOdKXNeP+PjZdwO/d8I7kAGUioP7A5CA3FFWc5qB0AiEA23Vzpn0FW7FvcrGndUVSGi/N53Bpe/vbU8J9qaVpuJc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.f7b8755f.0_1611175077233_0.07526645388886388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.f60de7df.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-ripple":"0.21.0-canary.f60de7df.0","@material/switch":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.2ed2d829b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-I1I5Hk0w1FQLsoGL4p+IEgKQ/934WH+vZwWsHii9+yeud5mJJLW+J45P1KVAsKhfdrh/ulGsQErHrunnWf9EKg==","shasum":"9afbfec8c34ef31d1c6f28b46a95406caa31243f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6TCRA9TVsSAnZWagAAjhoQAJoLW4cGuYl2Eop6Af7v\nn+lvcJWP8xiPnRliYAOJB6OQo02S8C6INjLN3CF4dzKvjQBLe00B59VbbA94\n2l9Pni1N/mh9umgIO19Ww64sIBr3OwAOlVzParRzTlF2yhlxI/butcwAmmwZ\nmw4EHSkX3CEgowJRD9bzI8QBVOCPtk23/RVcdUDF4xL8ShTL6G2YtBEs8cqs\nQdI2xmH02HZzitSHTPnT0c2Ou3lQvoGpZRcdnTxjbequef/taHziejyEk0lF\nz8AnuAq2b0LmODQ4B0CR+WHWem2vfEKCT/kE5JRMEbkchj0sQ7f8saNgMwO+\nFWPz2ZnqYIU9XsTJ0wkXd+Y2OYYTdIOcMbnw0DJmRjdVWJgvEkVfwn1j4TNZ\ngOS4hxdRANa4375IjpM5U/qdzjUMia2ibSYwO8+qaxhSbAgIvw7HVmPZz38r\neELWpn9R+pX6/RKHKpo9EDJRiDNlaeWI09osEfJoL8fca6EgQ6jhrdJ/Mbmc\nY25AlJ3flzL+4yKSKzZxzNvHW3xg6wkjDE8H9so3tVd+iWtu6wOtU7smMKjN\npqIMv9p7HpzwiTQgI4rfI6cukWOfdxhYSDeQfwimlXP3jjrEkb27oRnAeUCO\n8aaEoLYtpL7pEjiQf+azYyoOx2t96fLySK7uRaF1GxncmEZl2WoUXPH+QMAG\n0w6q\r\n=TlGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp/eCWhESuvrQc0cE3Hk09I0lQr7h3w86z05MqFeaeJAIgCac2w7ZFTK0fyY6qBHw313TSWQDv6GsqtUKa3cUqrZg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.f60de7df.0_1611185811093_0.43810140428053734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.664a2927.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-ripple":"0.21.0-canary.664a2927.0","@material/switch":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.2ed2d829b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aqVvmeQsoyfzhceFWmti2OSNqUq7IvOkvRI9QAawGFPDVMgoHo9kkxk3rRYMX8vLJxm5h+By1x/dz3eOK6z5sQ==","shasum":"b74f7382c232e2191db6ce1ebbfd878fac4f0551","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOWCRA9TVsSAnZWagAAdEgP/31+h4PTW9ZKh7vZgalx\n134sQHF/r7migYdnhW189K11IdOoUmnJXsgKK0JWTLsdl5QWWqJa2pk0rs9/\n+LYR9xB35kBFpan69DEFSG1XMnZup/FvemrTTG33qDYVQTSElXQfKAT8gOOJ\nWOIHFt+pPzOmUOiRfWTrBq9W94NijRwUr90CinKKdk8RAdct2lcDdPrdZ08H\nau6uz+U3GoOSTbiLzBr1jutSolYAZzYv4hoc4PWJ/Gh5ds4alyebzg1ktkjF\n5KXXxHntIXjrlBMhlLBJbGQQDy9HitpWwqGAm89b04Ky3phn3AkCj75RuPmm\nG2ijBRIp7ge0IHAviuZNnMfOE1auFK+35D+0rYuBKUSVYprLCn2mJyehdEIE\nDblqjhuQL7cLrbaNcKhNayzaIKmLyaAzCClezukGteIKhu8eK3v+yYU4b22k\n9kJxwNhYStqcRf9o3ue5KEX9rvzA1RQsJo3YGCKA+Vy5813YSk0rprgoCO6e\n1mEHYLrYUx2DEkMliGLOuaACyEapZvQSKykFTHK+SYVUg2IBRUl7Rg00n/5l\n68nzp/KWBP0DNQhBvt5Yvr2tHyo/anYEYgJlo72RBpoeVpNpWLENqHY4kSQ6\nzqXKxLt/dpbTH7IL3/YfRmznbbl8l4u0f5LTIu9xXsP2MrgAuxaVL/a9fNSd\nBYKC\r\n=I3Id\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRLo81wiE2xMXoSi4PBk0vDjCtpnXQ+X85cbUcZtccRgIhAIdpEDackx66ZcqOnhQfNEbcVqpR+LVT4V4AyBZ42fWe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.664a2927.0_1611256726417_0.9588758561666066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.a6d312e5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-ripple":"0.21.0-canary.a6d312e5.0","@material/switch":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.fd61b0476.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vFIq7CF2j2zdFADrqPLJ3Y49TtiFrbB+yqxlP67oBhHgBg22aXvnXWvjgSmZz/slIjLPSbxZ2H4HIi1+aIc+9g==","shasum":"8ac72ca4aa8e674632baed7382ffed15ba3731c9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfaDCRA9TVsSAnZWagAAVSQP/RczIx35AHm/eOvskvpQ\n3iHY/oBP5vIPL3DmVBcT7qIrN1pvPnFR6qVOhTdkPKZat3rTxj0lkuwwVUt2\nwtJ2gIb/PPAr4Xnpk02quRlPdeP9PMTOfZl4E7A6UALN3ZKWwtDyGKIJMWdR\nJWbOzjEWWSj8yOqOMIeAFlfTmSCm0n4wODgLTJCKwUSYF0iTeC1ha1JygWRZ\n1SkV3Xoe5KnZyX1RyiOLjFSPAvoUE7hQT1JUm9EQIxzMbHAwkn7fy1gT1MYY\n3Huti+EUphUN5iC7I+kSs2EFYFoWd74jCAH3z5cJAjlgM/JhEiF+w2gMwUYU\nPN8vl0w8S3XasX7RB00m5QjILsIycIafaLHYuPvhatXvDNm8/VYzAxiWGvJA\nb1GGU46+7x+JY4zumjYByWwT/Uzed7eVGwGVkqiW4OLaWcUXIzNrq2o/TLRn\ngXMbvDUVgoxIC2XzTM3gC5X/43lHgfpRLp1dEdBfpIHdA9UEr+K3tA7Zb8ZY\nUlXfLbuM+AKRYNw36EP5Fvc/+ehcSFpxOl50hUOi9oDncN/QRAf+XPX6Aqk3\ndgico7IYEvsagevgtk+Ww7luZD9NgymeSh+OKb7tdrvcLyGg7A4bZfBAWqe2\nOtr2z/9VfL7t+VGGlaMMyS2kV+fLIC9LXu2cuougvIRhANxFTGfvdDdOdLX6\nhNVu\r\n=1YYR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7ufemFdCXEGDmyM7M9+gPRwHbzTnZleOoFxhzLpCBxAIgJvXrtq7w250FLw+M7GJ/bHz/BrWMcCwD/aHjlUddMAU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.a6d312e5.0_1611265666617_0.5184703996358551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.027365eb.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-ripple":"0.21.0-canary.027365eb.0","@material/switch":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9RFCN0iSvU0RVXip15HsKdK5Z8324oH1pIz8jO/3n4l81H75Dn8dlN0Ge1jpcOgWDCULcleMmpVuOzvRgfgubQ==","shasum":"b1c8b3ad5b65186b26fb1042d98fcb2fb5bf2c14","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6fCRA9TVsSAnZWagAAa3wP/jF2GgNwg6fkeOu2w31Q\nYLKSgkM7Ny51nKy9J9krE5/hkmDxlzdEEJ/oO295BQ6BTtSmQMs+HIoMbUXT\nYnMmnXRaCPPsb1jq6r3R9isjMry80xsdzqnEJ54wJyuMqJRlYH6/r1U+M4WP\nRhmJRxNILmG2OORWzBb+69t0DS/3gTSxA/Iu7T02+CGSOcNr2uuF9LxvetFB\nW2MLHt8yRS+iXMOlrHo8dmMGtZGF4VHa9D5J7fhso/gb6wHoLQ1+IXCyvslN\nt+VNOyl1RGz4+8lkcjwB52V5PZAmR9loFwzEXMJGemzVP90ps1GA2Q2SvUlo\nWScDe13nXuRa/EBf3sKGtKTXDr+wWzzOvGwXuXUyXE4DHgB3I9x0+DWlaKfa\nHZlKp8qTmPGK/Y1sYTm5tMS6Y47K+Xidk62n6OEz5RlztTgvsRM7MzYjk3T9\ncWGCWHxMhQ+vEShUZfuvkcvWE90pe4MYkswV1Wa7ASaYRLS+tpOdsT+JZHmE\nvS7NBc0Uo0ltA2DnjmR1WyzbMjyI+dgvBJW6RPCreOk2WYDGMNM6qUtvB+XB\npUPe6EsesUHabhF5Xz+moetCuY5RkwZJcazE7+oJApVA82VisCaxxKviIoet\nkAy145oe17AnSrcrHolO4d+qpb7quVzdmGDDHovlRgsoKYfk8TmdgQUqYc2n\ncvgQ\r\n=kliw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfQ+3Ua3nPV8jLbntBDcNaxh1CCLZ4/wX/Owr/PYbsiAiEAxPRLzkV3ny9WCG5bABKC1OwgyHTPRTR9pWo1beuSupo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.027365eb.0_1611349663098_0.023686809069775938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.7e72b66d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-ripple":"0.21.0-canary.7e72b66d.0","@material/switch":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n8K3xQQAn9zgdI4TkWFW0Iczxi1Fo0cDE2JhJQ8nGvfWAFo7EF57iwJ+snmvrTUSTTL41H8gGftOzqspMhg2mQ==","shasum":"35b9503e2bbffd902a895ff7962e2fa1fadd3278","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18xCRA9TVsSAnZWagAAeO4P/A30NjSRbv64Y04YxnbC\n1momj4A6TB6ZLbh19wPkcJo6wbKLRmXvFP1DXoidl+YEB7j99uLgDAx8Wpiv\nUng1pd0/3tltQ5458DlfdSCtRsZH0lMvvJU24WrGsUcGylSl7iCLXLxOofK9\ntMoV0gNg+hG8OlpRisydH5qLIK5Ycyg/LTW/JwncExyDJcIGoyZfNQ7BY0yA\nXMkGSaAYZmvqAtXB8E6Xq89qT839Yv4BHxOJflDVsJUssu569sutXKc1CTxk\n+psU2UbmGhkLiqCS3lzOVJ7Um0QaiQ31eiQlQOjRSPMS6krUY4Mqr8aRAh3/\nsWPjE79gdqI651lzvr2EEXo2fuSHtYjwC9zYQnUGgKDqwGWaIbAxXx+oAhPo\nij2T55uwDs7qLRnf9TPrNvybKTRiRgn4Exdv2QoYVjokJL163umVKniuGmGQ\ndoABMBYQxzK1SUuQzUp6w/IvDrl5m51R68JWIiaVGwd1ahmM6ptR6kKamUbf\nRYFadqex8n16m5tfp/z09E4HOCmy6RPC4+2XFlZXMbGzaW4XNlNoNtYEciA6\nrHRXTew+pQiLPWo0SEqnajlB4QBF2uvC/Osi/Jhr/TOltR+gI1KJqAltUT4y\nWUcBoDtJkop9YsqacCxIi6FFl3O/1aSLW/Nar8RmV31ywuTmLk/ntyy/HkLZ\n1Mcu\r\n=9Pkj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKlg+vmfzYQwjgVv7Mk76LFn2lIeJtEjS/hEo8YfBowAiEAnkEuPQZHXzNmfpBV60Q2rjwuA00n6TJPNPPDw1MLjH4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.7e72b66d.0_1611358000926_0.9379455657894413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-ripple":"0.21.0-canary.a6d6a1e7.0","@material/switch":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SL1cqmvwA/+U2N9B9pzuimiyqzJ9skvmuWonWH0flk2gS9w/Sp1sVS5Li+vLJSUTI36Hwbj6lk/BcDAoQEG3Dw==","shasum":"a73e8d93b9718a55b5bda8172f7c246597a225ad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CtCRA9TVsSAnZWagAAUMcP/RwdtP8rZiLtVULBn3is\nGZvzgGXbBHUBRbq1i/6+etJhQ96CptP+0m8MwRIvqsP/XcDvGbFYONmkRU3g\nsiCdxddZ+DutQ+AYhB2jF8A3hyYyInlZByOn9c0GnoAqeG5E3ukgyGYUJfrI\nGRMOksp9MnePYXvsMeo3rOZcpYLJsNX66KCMAFaBqoLaOABbh7p5p+C6ne87\nT8mzeAj0Fhi2MzvryaEAcc+D/xZEbJZbcszLXniOQYXdwULdaAuMoqlx+xIB\nWuIu2ekbgy2G2lfukVB4M96M0Owx1gMtQ4XoVbWYHkt5HULHouBkgngZaIUM\nFHAARlpOHuhWMMlgjxCfkMTS++8+uKrBuiZQyqAxb3tS1v53+sftnUdgYJCx\n8BRjAVv/NrNeJSveRkFdXBL8tPX6kYh1CSPW3/VrPyHmmHCjiBz5yaL02DEI\nVmguTEvA4wmSRacXJ1xRUqhuFBSJ/+ZJXR1TXuX4H26L/Lyho6CBeD2+/ZpL\n+d4Fn3AV3GXu5zhIWKDvHWbXtiRc0RnHfqmxqLBoYxZl02er0y3/p+GLrM4s\n0Qjo3sKAmgGO02zKWTH8jJ1QLYwZnFeTr7YFC4IuQXf/xDMgFNyeDAAtGZVb\neZDfjo22We+YNS1MdxhSNHdRcTDQAWpTk+wGWsetgavqCTetpndbrZOz0W5O\nXG0s\r\n=zgMp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC4tJdDicZSqPYbyC2eVhdxVAvd0aizZzVrz2lSxQeSQIgblL57gqgSMOdTghd8piKtFiSWcfBFXNlme9eMoB1Crs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.a6d6a1e7.0_1611358381272_0.5747249254211175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b95fe100.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-ripple":"0.21.0-canary.b95fe100.0","@material/switch":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-S1qsj1GXGGy929kOG4k5Ozv7nkr9AoeEu5FBv7zGnx0a/pRk2sb8YmeEvzKSz8KuHAQn/sOS49dkuFpXYHHPYg==","shasum":"24ffe8f55d5d3e5601efbd6d26ee336c9cee7e86","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UoCRA9TVsSAnZWagAA6j0QAILTFcrQCbO9iw07imE2\nt2qzj0LILX5BVcQrzlqqA0hH8EylVktosK5s3GDDAUTohYskWUSk0DWV/+yd\nkRwqrU7t9nXiZ6WULI/ZpPC/hUfG38iRW+qfc+8fc5tTXYTlwClhMHUF+H7y\n0vIjEEj635F2kvHRtCE0edGzM44dVbMpNkJfXNyjCWM6QCD1UCiquC2TtL0l\nh1f9J1Hdi582t4tWmeoYM3e9VDITKXZQY7hojPomvVqPJf4BDgtrRED8BuXn\ng5EPAtWy8yaDfcXlMB3dVhr3A4GAQmz5H22TKGFIMZa/Ybj0Wh5z6ndZ7ILL\nq1VlnXf5U+42lOW/6nrbwq5eFUOl2uDHQpHSOx+N1zU/yoUQVc61s1RT29xT\n2cpKs6y6MInVW4Jf64xsuKr0hrsvL4M7R7mBt9onPrtUXSeBs23mqtJ82b5I\nUw2DCUA9pbQRHhJITEY0cqMiZHMiqasaECVFCk57ipNESankj+Ej0tUzusK+\nHLEh22o6opqWT59ObxQvB86pvPwzqDllhiGAzLzL/oSgaMBwv70hvNmyU1Ra\nC4Om5Gwz+dWY9UkerJhzqmdQjV5jr8PUbikklc4Ek79RODAVamCvUISJwlq5\n2uVHVRUqnTTOvaeIkfDp+d1Df84KeLdB/LdKUqGc5uNUXLNdOGeG2JGd+2xk\nztuB\r\n=eYCq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOR3PYeYMKIcipP4Ce1W+rJYzPgtiYamSvSyhaz8+o1AiEAoBYkejrChoBY5Ly4K4VasvWoCq0OQ18+52VsjMjwiaE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b95fe100.0_1611359527996_0.7015694933294601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.c8797192.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-ripple":"0.21.0-canary.c8797192.0","@material/switch":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-PqhopZC585Lei5A63RzZr7SK8RUTqgplYc6ncMUL/uMAz0MzuAQSadZ25ji0ajwv+nGQVRR2i0EhZd3mjqvHCw==","shasum":"992397c353ff2c4563f61fe08dc947c187030742","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jBCRA9TVsSAnZWagAAFQcQAJnPs8kYYmn2Drhp0RcR\nqdmu21R9uuYmfr0jc6WbLI89Ngv2UM7FFAtH9l593fgvQyg3SEq9h84Z0aPG\n/Q2I59a1rtPVAjhv7Rv2fYsDn4Y2wY/Imvqan5Sgmqfksf+u0sRkVfUgijZG\n3drCAAiZnjs5ZWapbqPLtnIE5qvCKBrIrSW+OA5a59le+uQqQAfr/rcQhkfw\nHF0t8kIBxTZ40KhI7tknwJ3DgOYOTffIjSTusYfMGnXCnFvyXvZUujQzEVZy\nmukQ7TyROWVWVNs23C+SYnmcfId0+IHdPNbEtc76AfyHzqQBFOunZAjFM1Co\nxGDd3NZlrw8xxQfp/0vvlKF6i/uAAj4++OngbNReqC/fkdTiS2JduR4QCh81\nAai2FBO3tffc+oNANVxekEcVTpWCnPe8JGCK4Q2qrkh2TkN185q3NhFMyX9N\nqtiElOBVXANT/nZLFDSkPFwAvvtGc601nGxfoKez2I4dtuGK7zIymU6DUpP3\nG/585179kvTSemJ33OoKPUMkS462g9f1eUHbmbpPhG3d+kTP7Vk9UKsrHlyB\njk71s6yYFIildVqD0xHMeyd3aj/s7OZGdhWpJ7ERx8I44HhBue2cIbms04c7\nzjF84RblKs4FRDv6exkAqrmIzACqJFzPOw+/sivfjTwD1RH6lZya3KHtOy+1\nIaIz\r\n=9Lft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0h4YHVVov7MVO/RrSBV+7+1jzJ5SIVtv9KWgUkWKERQIgOTaglsuRFScPgX4m+qF/oY+fAAfoo9HCZkCb3XjTzX0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.c8797192.0_1611360448922_0.9121648818858481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.946f5563.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-ripple":"0.21.0-canary.946f5563.0","@material/switch":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-I6nqmNmqxuFNxmo4dDN5CByb/7AoR8dkR4PyGmc2c1BX15jwtz9o39B+F8b9EDN/QH4GMKFD/i8KENNHalqjBA==","shasum":"d359417ea65cf322534b95a7a62860d62c933905","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FCCRA9TVsSAnZWagAAensP/jz/Bp5Qwcv0YWau8vYy\ni7uYYZujIaOuEm7gB6dR18Nm+mwLDtyWnJIjeS+lnVIW8Hu1NSAqnHRKT6yr\nBXWIdfxZ3bT/CetFnS7YcoE8CZbvIXXPXdyW8pai95GFVCix/Wo2+NKkynQa\ne06NNB2Nu27Xil4kSFvmkG+EIVdQgSLVGq6xwILjlwELy7MMHdLy7RQUsjrD\nelZKb0+BdQ/tYviCTvgNpdNXKclxZdzFrKe8JPkBMxJykmndVzoFbeKqUif0\nnVWhdbKCLJpE+c43fUycoU8JwH71xha8HHqzZ6dff7yRQ8VirvQgmVcgGslm\n60gPkLeaZVwbT3khM0t4yX/6ITJa/Qu8Vgqn6+XuDG/PduhohdA4NO0D4ZcV\nNtjhL8n5xbcpmBWSkIZXbSemoSY0dEas6AbcM5pl1XWIH8iwXPJzepzVTyZ+\nI9jxr1utbQT8Mp0nziP+Wdp8Z2vpBwL+OfSzE5G4zHflbylLOkF4k0E1CShI\nOz1DB0aNKz/UR4Gty/ybnXLmB0vVeFkUApC9JPc20UsHfyr0t19tsDlbM3gl\nyc9XnHjayUVfxd6ZKJAVZQNsMaml3HbDxZJSifwEzE1Sm1qZUAII/mGSdv6t\nxZFAfinjPe2Ldc6KDLeBWIgRcieJA1AIG9vYIA1Ic81oA1YknLoqeka/LKk9\nCuw1\r\n=msM1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Gnn7Roj14LST/H5gxP9aIQoOBg3Y4qDVmzavh1vtbQIhAO/StQatE7GVx4XKty64UuqqiDnTZVK4SodmhfHHCz3I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.946f5563.0_1611362626024_0.10416096439577571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.43664f0e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-ripple":"0.21.0-canary.43664f0e.0","@material/switch":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LyYOKMjqmAYERJ6k2VurjEtxzCBYA7073MmcsfHUkvXNRERZyL8UQfvBDGmgImGIMoytCa2dgyzoywrrZaJMuA==","shasum":"300f27cf6407a272cec8c436214c25ac98ef9d80","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jUCRA9TVsSAnZWagAAy28P/jABGtaOxuJRtvdJ53vf\nmn2TaU0X1LfGo0kVWlY/MH27SDt7FTljZVxYla5EFu9RQngTcdD9U1ni3O2Z\noQNwOa+Q5pehiLCUOMHUWcnlMT4YzvbgW+MpDduQP/kjpW3y1hP84bU0FLkg\npiJH6PvB4A5u96/DhFkUfTf2Z/GvcxMbfvrTkh8cEzoNBBwonVUVJE0yAeuq\nCi8+DVqCJ/VhE8N21rZBtSOTByTuCl2RGEhwnVhiJrs/zNWm+Ucqj1L8+tVL\nnbQbmIIyK0LX3rYLrpLlbS5pCjcA+cOmHr2qctI77E6Xo7Mpny/bANf4DF7Y\n89FLaIzrf6bIav8hIQeiJWMwOO4Uo0/A1JeiEquIwANmfVPRKJe6Z4kJizGp\nWo/9LM0uBJL5G0orN+xUD1qGK3MnUulgsqafSeCBC4qBGRzO7aPbMJyqnzke\n0nFzMKd2qmH0ZYKIp5ce08Q2UDj7/2eU87oP2Q0fbmhJEgLEt0DFVj0MgZxs\n45P1i25oSAVEYaO1nfdiHjRv1S9eDktCVANbTdBAhATVt2Jytf8q/GM7+dCe\nB0i4AAo6j4S0f8DtjFVpt97wBa4s25yy+vQzlP5a0Dab9WjnWkDkRsIlUBoR\nuuWDeE3PKJFQXtcpFyfwOWO7ASxZtC6IrW6/GAOJ2LCITJZVmJuPhVVCZm7y\nYaKq\r\n=CCU7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAY2Gi87nCAK6ZZ7XVXv1ey5l3vWHmyNeXpR//ERXTeUAiEAyOV63sIL6TIkMLG3LzqLoXHFY3wzO54C5foWwN7k0q0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.43664f0e.0_1611614420136_0.0035186614064710575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.2e769e3c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-ripple":"0.21.0-canary.2e769e3c.0","@material/switch":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mPCYjXrOPPIrFoKNFcAgtp09svYBEHunDKtYLARFZwR7nE+KhtexW1JyuMTJ3fsrPwMw2P3ronuKN6mfZqfhmg==","shasum":"f3057fa4144566180d78bf2eb76183e8e895a515","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10FCRA9TVsSAnZWagAAqOQP/1BEzDVv9pwKnYXDihQt\nn2YfIpGFMPEQr+uZtsQb0mooBwFe6NyD2HWw2D0Wrz2n2kAhClykWW3D2kFP\nExSRFrwwFWntQLJe2ahil+K7K7FyIVb1m/WahyI6OwE8aO95exqK33LUfUBs\nCmP24QvzoLLq2+6ANLDXUWKssdfzCYNXkuyNSrff9zMtu5kka6WovYFxjEem\n/5gMZBMLVa2DKIVblqj9s+XUgK8s1ppaURgHcVq10XjtDoM3/HsDCNcrsml8\nxqF4AVc6+NGWzpMkhSb2G3SxxG/OoEUy/f1y24cDS+f1PhuIDZIfDCnMwid8\n0cHPTLMZtCtL5IY5G7XtnF0rAaPmIpPnfPPzj8zuiaLtMk2ZY+VD4GDodnxi\noftF9k8HlTFceskyGxs54hieKr+eNGT7OYmWDSpE6Njqssds/E1oOH9OuRHb\nyYtzULT7RCycPw8VSPtmoN8j42ymOQFWXFRIzupShcmQUy7YJRn9QQ9lRw+J\npTWUaV9bo9xI01IRpE8xAsAVjRcfnXdBoT6pTGg8XeikGAQlsEhA6I8Mk/Rm\nQL6UiP48r29qwIfvZRzhGe56ExfzUnaMQ0Y2aFKKkAO6Dwr6WE78OQy2gKQy\n9RktX1xTC3+laAD/N1/LV7t2tnydBNam5TOlDqxwpiTwZlbK2QlIaNWzycMT\nrtf5\r\n=5TA2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHx/qsOq863kpQQrKmvMUc6HdDRJ29jfuy9o4vTuNVsACIQCnqTAH417p/zgsJjH2PeFfkDB4rymG4Hb3gVKbp8epmA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.2e769e3c.0_1611619589600_0.7725092076390299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.14e01610.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-ripple":"0.21.0-canary.14e01610.0","@material/switch":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7SvyntUt6F9jF8eHWWO6c1U7cHYP/JOQxPyzuUBvZ7aSa7DXnBxWM+lVPfjoGQrLIpr+UhNgN4zPCcjoxJAY6w==","shasum":"92e20781871c51c8f3fa1046fae356a32cd22cd0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRNCRA9TVsSAnZWagAAE78QAIK5RAcxlQ1DaDMucJ1B\nI3fp/Ku9u92nPhKqH3tAIJY4ziHFQyEfZgan+SuxxwYrUc7VyAao1CTQ0a6N\nTUY3Yav8VpmbHh9+wQQAqUmM5vM4z2x/GUEnkjzVKMcwIRKyyY+uKmqrQ7yk\ns3pAtqdGFJYyJzR/kTTm/KHs7eOiBiQEF4EP23Ch7zu+r6hnzX1/Xtg5+0KY\n+UnbbZrWuiWysUHASJv6OqWJNYzOGx33rpJLoYf7qetOF08lSsSr8EN4S1pD\n2yzzkzeyFcj1tnarB/746bjHpyd7h9oPjIRZHn6Mi7KMj57QqYQWp3y8ri44\nOS0QBQnTZev/QrmtAgU/QXErTFV8vgf4n4idYeCXIE1RwyVuod1Ty2/2HoAp\nbfuF+xQg0aO7vbFv7Ts8QNPIe0qQSDqcc89PpKm0c0IsJShFniCkdGXSWWPq\nAvIFDsXCX7OK4ebVyiQlgR7OKm2rqAp16OtFhBtkuiVdhKpusARAswseR/z3\nwPZN73FRyi4S2nzXthvh/79L31YVRJx8UEfZrjavVCS0VArTH/nLJHyFbho5\nXcu1FIkoeqPIk5kv4/YzgtxJSDZdHjkuZ4sPzAeCcTALKCs9QDopAOvU2LQJ\n/5mIiQE8Hxk+cc0iluPYeUIiHMOgrgHolx5yjkDe5M1BpQtAWRUlZh/jqYpt\npplw\r\n=zuCC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAwFMrblgQ7W1XbqHfkfQdq/lqfSa30RLeAwdsLEYlpwIgEhffaYULmOUnOkUVyAzZuDr1+cLwyoOPDTHpnm8euL8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.14e01610.0_1611777101188_0.7879214712665341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.5de00c1b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-ripple":"0.21.0-canary.5de00c1b.0","@material/switch":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yuHhSvtEjdU9ELJeaacVyT+jYWZF2UYtGH0zuAQwIZqrdhUWon25aTio0K25WzYBqgdqFtjN+mNzNKxHOnFvfA==","shasum":"d1644990bb33fa3a789e9a3db76852cc37919375","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpTCRA9TVsSAnZWagAAfowQAJrmiSmdAw0X/9KZgOSe\nhwErWelKt/OM15RvrxQMqRG6w9tVca6elX8+9O7SjxwDv+hZ7IjxdPOvtyyS\nIl4pmHGjsdmmPXhbyTKkyBsTc9kcw7sRkDK9UEvCBqm3NY0rZ+8I2gi2L4Hs\niFyndOkwvHWX2DAtjmbP+EHVYbobNxQf982x6yPS5JGPJtq+KSwykYPLxKRw\nkbDtLXz9fbrcZzpTbC9RSbXwb9BM64X+Ki86+Vw7+p08PHSwB7orOF/nhdGO\nZEgP8JiKbTAJIBLC3rZVk2KJCqC6c4wTw1LsznlIMlYp0RNQj7OGLKDs7iGs\nqwqr0QJcQW6fQzoNioxCYgV5HZ7L38SQQKttzgrVziQlk3RrCk/igQG7Cdz/\nOXCEZk6xwlhlBSu5nTqgAfwJ7nT2PiUSJ9bS70fSGUziyyKdGTa11jnDNRKH\nSoQ896uWxP/wO7JO3kS8o0Ivh8jDjhtEmBVeW5oEdSR/UWv2oTDOybkukPL6\nL69cQ3Ivc4sJj2dxB5PG29E7dU8GQe/hJ59cSReJVv/h4QgSClyStY5YWTLq\nu/ICCDtTBHXqQBqHj19Q4armEUNoOv+enXrtrHH2GAm0NpnKHx/P2LgAfxvP\nJUl4PrkbKhhy5VO1xlbvY9WS4qHutpvZd/TSKcQWK2bQ+NKlvOO7juxB8nJs\nnG0s\r\n=u/b5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrM2ioZEMoA9i1xRPKSGD1O9PBBVxZAfdvvZtk20HGgQIgB4q53dRu5zbDyXZ1rH/eK2p7O+2j+8ET53Fnm+j78QM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.5de00c1b.0_1611778643536_0.5243160507744982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.5a328336.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-ripple":"0.21.0-canary.5a328336.0","@material/switch":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-G8nVEAvqDYl95Y/C21dSX49l16r+Jd55TRuUrQoPzvVl/Ke4A4cziNxwez+tw46EoKwHN9Zu25ywBYGdrwrzSg==","shasum":"368819d2f7b573d267dbc078899f7fdcecba5913","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExaRCRA9TVsSAnZWagAAdDgP/10a7d96xA0X2/dXDu2O\nZRPB7opBJsQKIA6ce8h3jqcA4ore9nRGfTHWzOPjrwVnGrxrG9j6KiQURCg1\nXivzlxoBDed38dbT76thg38U1mMyAWj+lEGQnU+vLCowLkdZMtQUb2k7Cl47\nRf7sDn2c4JFVoAu5LwkISWbTKY7q9hyzcPPvkTNRqZi04gspHTOHHtwTZxEv\nRScCL9DDMa195shq/T00YES1QPljsdPvi7FJUs4EjSjd7VusQQ98Udc5u1GH\nYM7UVzjGXndi7yxxScBzLq/ydiIAMVeeqn6+okyjAOG21KUb3ttrBFDqhSHa\nSvoDOpECBvhHTG0BtSPFSs0QB+7jlId0ujuV6wEFDf9C/tvnkswfnuihnBTK\n2jOlxDhQA7PKVLAWmPZeFGDA6seJ7yPC8UtEAYTGJ/ZQjHjXpm948BGU+sQw\nrSZWh8Youyk/3k60uyItwaKsMMNK19F1bBp3+ms4TgKFa8KcFNTSxMvhJope\ngZ3o3AV0B7MGpr022K/USl7Irj0JqwcsVpk5tJBFCMZX7NnWLGYjV2o30qFS\noJ/CCcVP7wJ2ODdvOzmNja1qvTYsfbIs9Ao2Rg7MkwF8H6G1SAcJn/fSfXJE\nlZJuClcV96zQ54VLjUkzjqQO/XEc6xKo3Um+PuKQey4xmjUnLsOx1Ke8QHcY\nvWgr\r\n=XQaf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfJpE0SirhpsDlzCMMqajOlumImC1/3lm/53PuYZk4XAiAnpEFXA43OkCsYD62K3vCMNMWXusMH5hF73owtRJ0F0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.5a328336.0_1611863697093_0.8813719616262952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.533b1251.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-ripple":"0.21.0-canary.533b1251.0","@material/switch":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Cje9biq4X9Qon23cy+Y7iBHXD4zNGufTbzewZib0GEz4pn2X7YEv2pCaJNl/2pYtTzitkz0KJET5UW+JGa8FwQ==","shasum":"ae80fa19b7db54ea386477d2e885946ceca414b6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCW+CRA9TVsSAnZWagAAPRkQAJruh9OUwGQz2VgUS3EL\nUDhwzJpas+EJHk8Y3CzcjUVeMoBzXSaVfoaNrEOaaoSw+ZQ0MiBFsA195o7w\nQCBhkog4LwG3E/IR99lBpdWVFK1EH46KEgRTpjIK95stOrHGn2i+DZmZj5us\nRJVnJ2mkaomatnQfVLP2Cl5RFubCaC/EBDJ2s9m8gNRFX1zv8NVitmZWP+7n\no62+RzYqu94oDW6fcPFzQ8ZG+V7MTUUN1KDkUB/pcGcAumY08x0llqxmKE6o\nVoS2N5AfYVuYcMsLyhKUXiKi+A0OGaXx4ELahdGxlt63wQgM3Rheuth7B50a\nhMtH0rDOsVPgwkM37oq7LlOhdN0xLwoOOSZ5+ghdmeT3rghBy/GziqPfolgy\n8mYU/UWeqc/UPaNude7xt7wSoX1fP8igifELDC3vPGwGgaKDkf4nqSd0AgI8\n9DOl5GaK50yiSZaZQnR2fkePZhM7ID/2hRnyheUFcymtAXTl59hBzuMNT+PJ\nNXapGBfuTPUkmeXruCGChw4UUxsPCkSx8rKUala4OrppkX9MAK1JDB3QnHRr\nQklhGGFBEgybk2913xVzaJjNDw8fhapMV6y9awU1IgEEF9GLvigEQ0NBJoPp\nOQ3WwMMJntUNJ0Wee6CJoIrk2vEjIbOcxTIM8XQCNxrr6AKGRgWIaPKLq7Qt\nUIgA\r\n=/oB4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4G6gdZNYl/TyVVVi7EHz2vaQaaLC2t6cm0yEg1ia48gIgFMg0gL/zbPm3V1t1+++KRq6q0Ew471+7Tmp+7gC36hQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.533b1251.0_1611933117560_0.33505367576961964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-ripple":"0.21.0-canary.ab5c0a10.0","@material/switch":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-gg++l6yT4eDzvLs2sEqNiP9yTeV9jbqicjCa7AL7/rzrLYsWDm1uFWrnXEV+lQ83h+3FwFbdmVrN9NtZJoo+Dg==","shasum":"9e186b21b15c19f4ce494917f0eca407c8218853","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNlCRA9TVsSAnZWagAAhf8P/34G4W0SuLq2jcj3VdqL\nbv8XQRgxbKqGKQMJjWZxxupNYvfVe6Q8SXw0HihMMPESXPvwPGRCZkxJObCG\n/jN5wf+MVXdE97ftbO2vL+V4jB6184+4gmc8p+hO/DEUBdcnTG38weooBBLD\nWz8OoT8KvS6CHGM5vOggBCWEknkdF/yC8OLY4w33JCwcZ2Dv8dPeBw+4PcsB\nUrD4n/UJJgRJyVjjywJI/0eCbac4K0lnuF+gTqUOUN9M8vuvHp8bPF5EMZz/\n5YEmvN5oL4p1aPukSp9qkWeyonOmaCZjrpsbLXnRSjoHgu/S+vICSsx177vN\nqr4HWdPb+EeanpTvpA4DysfYNqNZvUZCFuiKgB4CAJIhZ4VHcD375GfecjFL\nz6jq9W/GfRGOdLFnCRVvR62U0ozauAPQIicgT94pr6gMXjo/jv7sm2M3CiJD\nnUsrvqMx4B5lKb0/O/hWgAYyubsfVos4DSfRco7milxbnqODfhau62KmcCUi\niY6XRfVBD897MbANxyybsIGdvvXMJ3OfA8yqDDrno8mrKgnRVjKlNzgxlcfn\nnO/93lVzLtcow1G0xB+XKwZfoAsZ8ooOYcADLEDA71mXeChGMweVFVUZIyep\nOQyx2Dut1JhvdoS2kbJamHHNb/x76Mp2b3TkLv5dbL/WD3Y9hMbVJRPSZJ1V\nUczW\r\n=JAsC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUPbiN8zmp4bpRTAI8TIvykrZwc1rn3B6144VNYa2U5AiAi1y5yKH+O2a+ytqedmynT/bJEsal5VzNPMIdMyW/M1Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.ab5c0a10.0_1612297060628_0.9032242393078858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b7a40b27.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-ripple":"0.21.0-canary.b7a40b27.0","@material/switch":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-GiptMkkCtIHE6V//IrS52SZSeYiDL0USjuWPfNwzoyodZpb7U8eskQRbNNQCDdrMECeGmlxGP0KBCFkqV3dmBQ==","shasum":"ece6608bcb4176f9b41da7484ab4ca3fd7c25130","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtiCRA9TVsSAnZWagAA6RsP/2MqpoTvZFGZx1+gjrsR\nyFxu/EBe+6cut1XSxj2koCRdJSrKzU5WFj/EnBiM7TJ9rq6Ql+vILYkmgmsJ\nx8xh6mjVmkJm9xmHy+AmKCc3G6USYNswSN4ZbEnHnnH/8D27w3MxvwdF0lKu\nAkHqcx8OQvMd9Q4VcrFT9V05SP7pOCiPwhi0NGbye2qgp2q/2L7VsSzdprUs\n4H64mgGbWhUQVjY3D7ZiWy73Ow5JKB/kW4wUyNtJL+M1w35jJte4Z99wOxVl\n4ZJQrb/pyxOA/6GthQbwptTT5Knn5TMU0ul0/t9F9uPXr6s7KXq0/6v5hodu\n21iiNzBlBd1xWTxNE/mu2fJC17tkJjWsus0B06xFfwN3bbXXOiq4OiJ2pMtc\n7dp1KiCXnnOWvzcHTsDTGz/Yv7VBJsOdra0A1HnuLjrzuZByGjnpi6+KvVd4\nRJFqCCXJztxSoEnJiPv7++uLdJwfoUwX9tMoS2yTflp2cYjTS618PNxPj7nv\nzHrYN6ZGevx68vywoEhkhTzGLR1RWfZywGj7ySQUBHOHqRWq15GcLswzr+TR\nggogI1qnlwSzsUu4ElPEfzPrJuj7476S71gVf6jd4GeeoC0cSyfrVerLNa7v\n+O6nWCO4HEdHC/AA4Fwnw2FL+33ZIGhvlSiMwtotXVkefI3bOE1+DUNSFVO1\nK3bq\r\n=37Ln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhcyISAnFUhGr59tXo4ixyvxb7Owtw01/hqlnBUM1PVAiB/MfKQeQacTDSTA6oH/NOzJNbTwdCR6+LONONpJ0xsHw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b7a40b27.0_1612364642342_0.38347363875207385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.0fdee204.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-ripple":"0.21.0-canary.0fdee204.0","@material/switch":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.8e66dbfee.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-IAje1CXD9WSI7lryEuvirmnD+xy+3Q+V5W5oRqh7P9r0qS7FM6kwB1wQjfRCdRx5daEMdTljMdYTzG0cqVYh2w==","shasum":"bf1b3327fafec467bcd43e5264af67d0c9c16bb3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyrCRA9TVsSAnZWagAAQLQQAIuMIwau5nReGfpW7xa6\nsR43Lxg0Zqex2g8UvGgxUMW30+8Dz5yuXYlpWtfEYf+vU7TnYSq3UZu4LWRk\nW64yb5xFltB2vnuzKmuUZb/yOKJLhf1FnkUZBQ6I3eDyLfhY1+mn/hvmxv0L\nZ2hphStOT1ytX1C7CGrPc4QTevqAeC7r4hO4OHt062KsY1Itov3zl5wdC6UX\nhaNKNKBoQDMJkvN6K/v7ZE6GQULHctSHQPKPqIbVqdRXH1RejAVS9U9/ZJkL\ndYcwKG/iapYnS71Pmbesw5XmwfTEWUNmX42qeCjmt611eQc9MPJKS8mv4GDO\noSDczM21BrqjQlZ5n6sYPTYeEiqyblulgG1KjGSDvI5aTuQowR4svKFQY5zj\nSzdcbKUb72E+7RvzPJRU/4izuZqJyVLuFYpEeLmIrVLoDn9lDUL8zLw497Or\n+DQmvDyMb/pjbwsIls8HNbZ0CLJfFBAylSHCIPemqXFuIHGYMjPlEsxfbOR8\n74wHTlc5k6whgM20zpiOvWV/Tzf6efHyanbYTmAhPhHc9nwj2bM2xmR0h/pP\ncB9pXEcHLyC/LF4Una10tx3Oaot5NIbNIJ1Os3YNwfcN8e+nYhBHI9OLtEGD\nidxetmEyszGlv4YdqF5u9O0soCiwRnWkGwXy4VuSUs51qzGlDFUnbd7Dcv3g\nNBD8\r\n=dGRU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWTQv7RZLlzswpp3t/mtUpiu2KRGM4KGkqxUy7X+WGgwIhAMpH819+9yyweUKvnjksLhdloRos+mr5WV60qNIZjAcm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.0fdee204.0_1612377258658_0.13446482113842073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.5160e548.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-ripple":"0.21.0-canary.5160e548.0","@material/switch":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b5227247d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-DWQi9fGk00KE9dABKdnJKbO86yRDYSyOrDqRocA6n+S3n2z/8dOavwCg0cUX7Gobrqjsnpgrub9Rn2z8EZfd0Q==","shasum":"cfe196ed545d1d0f77b8b237e06e1e8f464bd13e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoDCRA9TVsSAnZWagAAXAkQAIMObXgho3n9SvCxbhee\n3tNO0c36zyhw9krwSWf5eJL9W5nyk2x2E3rtcb09oA/jmJ+nwwqA+umjO049\n/N9qn5hv9U2dA/nPeSwdnBwKmYaB1GyrX1LcJhp0Mi18SY0x7EgFHztr2lOc\nnFyGgGG0jK7ALzJ7h7YO3xpfMzjpSmlUSRQ5CPGQETVmQcd+qO+ucKRF44Fm\ngp4Ir8AEAFp+gJp0ElbWUad271h5mturndKeOHStedzyVggeV9UkCIobN6g0\nwIp+o49EqOl+Uf8q7pE+5x/XeuYIAE/eh3lDdhPnpmd25GuzaISqBN/u8/Zp\n4AJQs6wSYVmm5xw+r+X0pbMO7G2LAqOxM0o7w9M5vMlomr15P+6q5OeOWPGg\nI0DxRIiOHU/2+u6FMuH/7x8uA47Gc0wXEyh2GgV8tqXs5FUG6/L2XNbgCeW4\n9mS0zR7pkm1lnDQVsKXsXg5d9LXzH3yOblPDLblTFqI3mT3eaCoDYEuAUYVN\nchnkk8uAP1qDCuBP++Q0m3ssCC4DOMrkaTvmDYjEOeyEZzzhnaW/H2U34dEv\nYaWS6jbcQqK7ToLd0+GvpJyOvkbpxff5nMYEurxYOmkAHHUFjPgcbugjAhxz\nSxvS5OfoaAFInWqx4YHlM5Mo9MHhiPuOxnlAy/QpRfJQMlfwtW+UJtsL7ziU\nk1iX\r\n=LQ6K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1tLHBd4W3c84gzAgaZL71A2hRh0QPzqBnmq5+cuTbKAIgKq4SzfvdIl8TL0FXdagIXWAKOCI06tC5yypdBQ9F+88="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.5160e548.0_1612569090792_0.9052192907025991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.4fa2daec.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-ripple":"0.21.0-canary.4fa2daec.0","@material/switch":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.aac8f5d9a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-BVrX3B+9gCxTJiX35u26/LcFwmSzLnzIODzuRyhDW0IEegaDSjD3goseYAES/Zo8w4STSIHwUIIr/zklCPGGwQ==","shasum":"8e6070f40ed2181767f02e82f33209646f2190a6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTtCRA9TVsSAnZWagAA4vwQAIJYp5+8frUbhwi+anCj\nUwhzc3w5lNzi4/cfsqhgdHcyBfvvMF+QkMgvVvdBFvEn0iOG/ZZF8016cZVc\nW0ppdiwcS7CLh4HUKlqg/u6EX7czJBha3SD7zDvJ0FFfCXbepK0CGyZUmgpv\nYN+9KJQdguuoJUj5To8gQ/87S1Ud8qbZXlIJ50OVYiFKwEuDlVOlgGAXXyxP\nfa8Iy1VUYyC5sB4X3mKdKsLVWYKWNBCAH4KQax0Zg8j9Y9bujhk3NZjSBJD9\n0vHAOM7KYXJDsD1BHbYch/2bO2tqN0gIczhqB+UvHPZvcZTp1cBo7oVu7VMR\nDF2YbpUwojkUhgj1z7wtcxUMyxYBTC13DV3Bd2HCh0HOj+F0RjezthTdv3Xl\niZbnftsohcQnsNzbXiWOHEDwb7/13CEMEey1AsmYWl96Q6tHDgYL/ZfnS3ew\nxISvuDhF/ySTdm4YPgNkgh5d0ZEADXRv5n+bPZ2hMfRObHpmj7VWmgorJe8c\nlLKiVHQ2BSmF7JiXnm7OJShN4tm0Og6EyG65yq3xn8XzdGf/0jWgfKvM7scs\n3io13hJRQ6nW60FH48fkIJqOovgteA+6HfoKYN4hQCaPjfqq3LOBQH/4qYxn\n+TsQ+1qCOuYHJcBcef1BMnp7WPC38ZIUOXvQeaMYOo0aC54GHWwaG3LVIi5R\nsLVF\r\n=QlqT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkT1iVvMG0HmFOmYm//VNTfuD8Xu6Y+SgRB9UIGRphXAiEA3s+4maxBYB4s/OY09kHBotbG3yldJsqP/yzFmmrXw/w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.4fa2daec.0_1612829933451_0.3525874434446783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.67f285fb.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-ripple":"0.21.0-canary.67f285fb.0","@material/switch":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.750e18fc7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-57wqei7PrJQ1plKw7oXswK2P2FxQYXTvXgoiRs7VnublaTtJiQkG/49yR+ietbGrrDRaNa1QTV7vDeeSB7zVyw==","shasum":"bf9e11d920daf645bb0aee5a49d49995a2b97df5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdyHCRA9TVsSAnZWagAAKpUP/02pVRK0ZCtFyZN03uYr\nm5ioB/etDNE9HC3OJBCIDE8Qobe4F2b9fGtbkfsFw0MRDGRoTG95/ISahAeK\nByyNSCXk8aBRVL1uqSJf8Cq/XFflLrwoaaN6cBXbBufqNa1U06tr1bDrdqBG\nsnCvjrznzbt84lxPhIF0K+EBUhnZAHXUAaK6MyydabnbfgQOTaUoDq4GOeHI\nnCqJ+b5YOD53Jl0SKQVgPVXQKqeejtoifc7Gbl+2jkE0fYHxGZ/sUp90y2uv\neEORttvQyChVd44lzPdXpApGfVkXMZ/NpH9ax/rBA7+I4Um6LDbefs5mZwjT\nAQVO5JqMgwgE+VWHONI/vhJrSvNQGV0nUet1GOkpRkyBaGaSAyA+eDulfp3t\nO1oK/SC83UuFGVfdDnWpylYTsrXorgwH3rjyYkNJb1qQxzEDMfB0IIZrbUPU\nMZkPEDKmZeXABwALzStvQh1alZvFodUvCA6Xn9SSK/2PA8YnSwGvX9q9WM9f\nWw/XW165Z4orc8cQClrR8RZgu0V8g4NjHGxFNw/Z84o7Y62RKwJ804LdVU9A\nCedfcfd0jGFS7M5cD7HDlIsbdsRF1T8OoydRKp7wI5nkztHkJKyNz+ErAsmo\nEtqUHWVInHv8zRzn+G4bZPl/ch7VljS2Dhk9A4vkDIi4/jSbyNBWRBoVyDho\n9vFr\r\n=gmQV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtCk4BTWH2CGftVQcRhlXZlekPZPZOqUQ460EFAkbMUAiEA/6CZbvbJkChXbHo5HULPFW3NMYoCH//IRbSK8z31swc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.67f285fb.0_1612831878898_0.21752088157829408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.58cd5a70.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-ripple":"0.21.0-canary.58cd5a70.0","@material/switch":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b62b1266d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-aONF/coxzqmXugBzNTQIW+rLDdmIuQjPvboal/l7K3LhR9xTUBMWguuq1Jhrh/v26h8krHEGA2frVfUiP0v/jA==","shasum":"ab6c93dfd27138066c34b1585211e184fa1a9288","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdjCRA9TVsSAnZWagAA3BEP+wUPWQOxuI3w5Mw1HKJe\nN+CZdYoHG0R9xTsQ1jx36zZ7IazJ3woaqOWkTCPaHMJc62fsRZDqwL2blgfF\nMpmgWn4ci8zkyg2Bi4YgOLGM2RsfAzv1U/dzkEjKP7IpUJl8CCZ1afiHNPrI\n3q3f3XgpTc/CJMHwuwmz3viD4DKMaK871qK75k8qkNWqh15iBCHSDnRulzZo\nMtLODIA1vKwHTwkjDe56Vlsvs4KWNEBYvBd0RswuPXyXtiWzDNSNcl59mRwB\nTQRr2PQu6j2rSTrLl5TIR4kotSmKMSXSWT5yxp23xpvpKZFnvlVAcVSmaiJY\nJISjx1ZYabZFVkBEHq0V/PhSV9bvOYvzRyuRp4Qpqgc0wrhiHFcwS8LIaAlM\n2y97FK+OlSYokdfcI9SUHRbMPC3eqhquXHy17ByerHCrqBvd7xSvGgnc36lV\nAfyfCRKhEfQQC6Pf2+pdGxZKWF6PjSfb/N5i/sGiH0yA4mPDw0zAWVP2uGe9\nQp9tMHHhX3sJ/8L4X9gjXNDBYaBkA0D9j94k0UBxuGfYn5Pq+XQeEtGt7lk4\nVU4QwN/z4zrteQC3BqoNh4RJ69eqDRhOQkI3+yp5ROImyHrLLr8aaubrtp3Z\nRK7rHfHxdz4x3qiu95GsRkqCzah3f45AP0qJDTJUA0qx7BINhm0Fnb7dlTOQ\nbWqI\r\n=OZ9X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCemBI0E/plt0WE4CyyswrYRjGHGcrXnbwAaKxOXepbfAIgP4sBidzJGytLOacpr/vPxkNbNU/GR0ngUZyIAFguIHQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.58cd5a70.0_1613076323108_0.9735041066693206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.8107ca43.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-ripple":"0.21.0-canary.8107ca43.0","@material/switch":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Mfykkc68TrcNmjdk8sRaR0hEh6xyU8EWTOx+z1wP1xcnCTtKQ4iSi94jJCEVObBv2/JJ/HP3uNPHhun/C177Yw==","shasum":"4ffe0f7436f385a9dc124a1df36a7ea70449810b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3LCRA9TVsSAnZWagAAAe4P/1sVrUIbMss64QL9xWCe\nJdGPwRMvJ5l8V1asABH6Faa+WHkSTPN37r0Nxh1UXfVAlauQbbhoI8FpxTDN\nGSb+0B68KxKSDv1+MAXJ2tw+DGvV0kGJ7oADEPP/dBwQpbZ21gsVi74Plrzp\ntaMxnf7XgcQOQOnN2KRoYazUaK8KpH7t8WEx24omNOjMO+IlsdX6vLW9XS38\nWEvHioip9zoI+V2wtTLcO+u3jnf42AOWY6JmzmkeDYn/k3duaDkwN6paLYB5\n2FR4JeyXfWTlZojfGMwabXAiOQtOGjQlKhrlZx+D63s2ANadG/dwCwQ8fgeB\nAQCJyBJXcYLnCWrz10joonfY+aWQk/zpJXT+lElaXt4g0zkvrySe+QHXkthK\nZfW/zyl3BVywrRdqTIQVpCfrA62rDT54Tb8thcDPqZjgNQI9ubvaSfeKmmIo\nzAuKJQ7zILQx/a53gEJ7YAdqXI91xTahzxeSp4+NIc52FSJcabEGG2I9L4J4\nBGMjk45HqUx80tSM9/6ukfWpGYrYu740oqFrWUSCLzapAPdP5Y0BEqohsxQN\n6lo9nrUB2s5/Q0EXPMl3gi9TjdlR0e713zmmgdcydXCV1J8DuYu+6O/QD31f\nX4CuZnSbKEbrWYRYaItZYaE18q0tLrr+Fq8+H6vZ0U9Jd9QQaK1D+CYmyhTq\na5b3\r\n=fGkU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLTq4f6lCTqD/LDm4hElVolR3rrEodW8Vy67fwAdAjfAiEAo5t20AgplTZoWmYDXPfVigC37GkQ307Bo/L7V4vNEgc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.8107ca43.0_1613086154560_0.3756419952897614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.d35d64ef.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-ripple":"0.21.0-canary.d35d64ef.0","@material/switch":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Kte/00oCNgYKgH+rNrBQUs/i7gCb4WCXMqHxZhghgOmMVQkN6SiZtZARa58srnPvyYjgjtQ+o2srlSdbH5FAIw==","shasum":"272c554c5b3c30e4f97f6c8d40f8aa43d31bb99a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEbCRA9TVsSAnZWagAARm0P/1BhV9a+C5YsMDm5a4HD\nHCAOhxXM703h2THnsFuPrq9YSdnbtrVjFdo7ng97+uEBY4NJuD27PVf7AQEV\n6w2XqNUtUPRSaUhqzKBHGCZRUvuggKFXGcvSbP70kIJqaa7/mkwWTxCvTJiO\nKj8fpFBFuaJIqMqqpVR3UxlXTCyixZDtU6qzmMM8sz7IbMRb4ThmPPyNlNEd\nVXJz+m5IXqDkRk3Prlm0y1MkQ0JqlHp5SxWCcGuMgL6KoMhiTA62D7E+KK3O\nkrcIlpp5izxfs2muherC6QVFEI/Z4Ii4CQucTiH2PV4ewMFgBkOGnge3Ovud\nzwyeyE4ViLczVroDByqPAxEIzc8FNBdk2wuUJGVdGDz6RRnDEwGqpyfVFgAp\nwKketgM9b6MN1+u1fHD3odfaE52rkoKWFV/WZTmUBJfxNVfbizQTr7Bw8VCr\nYszwKu5YxeU5aKUW82CeR0mtlk8pxBP8B/dyTwNznI8xAd0DbqUeR/Pe0neZ\nHLYYKxnwG3tet+7VZv56322A3AkxN3IX6ruFsxm0Q52JXDg1KtpdSI/8JgLB\nmS9+wugGNTzTeHqOXxwoBr6lJMBvB+4WUlyNtBGb0aEcKGIdCXJuYJvzVFVD\nOeiiV9zhDeD3ix1ktZK9pYll1YtMru9IIzEcYnrY2BOp9Jjb8zsHUB6n2Zfa\nFLuP\r\n=DTXC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+vR3WmvG3JkBY2+LVFaevOiLiVxWRtbKmxtjGohg0IAiEAhFmoLDdRAHMpEKLNk7gyh0Q8Gw12prj/X45qwdZc01E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.d35d64ef.0_1613087002971_0.7913220675515529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.78bcf058.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-ripple":"0.21.0-canary.78bcf058.0","@material/switch":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-YD6k9WaKNU5fYKsZUvd+49GyJZfXYuXi7IIdNvGm8RbLZwxZY7yfVbym2uUrao9tmkmCI/Qw+QdA1+hGTkfrew==","shasum":"1272cbb3ec3bc8542bc7b7da84b34c3dbad53ae9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBlCRA9TVsSAnZWagAAorMP/25iSKXqlRvrRgb5hm0F\n5Emf+QNyA8GhxrIFNm7hiSVh+l0KXIekf7M3mhkI3xaw/Z4ltGeWhAPLV+JR\nLwqFwUINbA3nnR6NM2J5Ip1GwkcotjAJAiSrtVxZDzYwYJ2qIVJfO4VVrSl1\nbYYd1AG1Yq/5GQdMKnti+8ldNuhhuXJSseaP7usWnWsuT7wF8heP6pGbN+LT\nYGZNN5GASyKIjOPN7/nPaDDLjzl2Mb+0mwIFX8mYrRLgbdpQoPpN6MC9EtZL\nt0gY9vDdVqKk3cZOlMgKLwcnzvVW9jHzdzmrIKJF3/jJuiC3HMlcJkI6Y0Ub\nMkJiIf/CQ8625Nmp9cY7Xh7YcVEKlHarK0fYuSSHnqC1F+kra5UKA91jweFg\n5bXfb++c9nrLhVSLGLPASKmDZ/8B+WEP9mu47ueP4VzkHjfIfOHwfY0T0Jkq\nBcUVAO1rR54eACqlD9SnvxH+KgrJVSjImXPJ4PYwSHS7jvIGWNUFKXwEHDyD\nbJsewChBDhKNJjOkGEDg0+fBuBAN16LwFUMzzY5PPR5/CYPzjoltk6TWPXy8\nIEu60AjV3O1DtH+RWYvdu47Ul3ePlqG8fuVz/BlC6FQQL6/VoStHzz+vvezI\nzc4phnh4j+U77vZZbrurI4zqLAaYfcGe0I1p3Lm0tTlWjxedhhBp+y4yBHaD\ni82l\r\n=ayHo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpEEvzT0lZZq/4Zp2llpzWvrDRfCohetVFKSJZyoZZXAiBtEp0LgD1i/Tk4ivbEFaNOhmhpDdvPtQWD5JRTB1xtuQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.78bcf058.0_1613090916851_0.20101876689139253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.0c6908fd.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-ripple":"0.21.0-canary.0c6908fd.0","@material/switch":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.ed88df700.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-bvLWXXCKl6FJ3NRqlFRx44tlhtgH3O8+oXF3Jlbu2sYHEUFLIl0TM+/UqFZZz50ARiOw0VRIwHwTVJVPmRLevQ==","shasum":"b8dfe7c78707e7a9abbae5cbb995895ec8a7eb63","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjzCRA9TVsSAnZWagAAhbYQAJBL6zrIkySNpYOko972\nYTXq0liFZuoN4hg0Ilun8Filesn9v8kW7UEwtIrPsRkua7kghhT0APylFs8V\nlzxhqvBf3+lt/2zLTqbYXdsExxhDXsJmpF5+cgly8fappLGwp31vpER4Jcry\nso/Zb7NGp0k1IYNFZru3xBGdEQXvHMzv8bWrFBhtllPvR94i+XdMdYNglx60\nNb54YWKPMleb9gBJpPGvpR5Tgnnk2Dim9SbyoUvoAvDMFVkC2f+nf/CCESAv\nuhb+iEAFTaFGdZ4QiYmAwciIpLreazlVtV3ITKZb9C+KL0wmre5fMuE1iUIl\nx6KoFWxgeEGcaP+SxxLOxnrWL5G1TQ1D1ySmmD9gtd3N3VY44wsrTjf30Owh\nm3tx30L7VKYnZRrrskHGzsIGAMtB3G8y3mSHW59sX3K43GtDGihj0wnHe1L3\n2f69P3Oq9/Fuko8jr1LcsB9xg5hGnHHkO+l5xeTaprLxrauwcSaq6zHL32u9\n3ZH/avhBlJYL2awYo3sM7qBXuKzDUchBqWPfSwmUWDTSALDqaZFILuAj5zk2\nT2D6c4zrGdSksaiSzV+sXTA5dvErfTja09vKq0wrKmjNQRetk31Eevhg5d2Z\n+skZnpO9ZgbT+9r2++iZ7K7LlFxPl2K8a2M1v7tut3+rfXT3Mfs6Gt9HN0CT\neUN8\r\n=JW/i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9983pNlvr28P6cgs4LNiGL2uZT6SNBSNPLPAbO7MAWAiAuf1k1scazdieqiZ5UHr0Ce1Rr3onf5OHdeDMxuBEZsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.0c6908fd.0_1613093106993_0.2765919354666717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-ripple":"0.21.0-canary.f1f34ee0.0","@material/switch":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.71fe9a067.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-8pfyIagpBL9IZx4yG77gR+cGbNRTQPd2+INoxIWnShTK07tYFHqdWoyWmnHeSkOWrx0OyAXQEUoajHiY+q65+A==","shasum":"f2338265751a559159bdd3ab774a1c29ada8fc96","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKMCRA9TVsSAnZWagAAqdcP/jcwfoE/ZrpJkA1hfr+G\ndhqKHp0toZ1tJqtVXFA6rX619XvchFWE+GQdrWfr7PiVZnqJLJ3SXWjVe4HW\nJOa3Gqh6aUflDe5dKZYY4vZdI9I3iRBA+tF3dVDJsZSxXVGs039RVoVgtHkb\npnGli019ztb4YlQV/MJY5x6bQLsX/a5hq9v7FlfN2KQ8Jy3LYkEdhWL5h/NH\n/naLdBPVXeEdcdlh52TAoMjOyAWt5cnEBKw2cv71ZEQ+RiJ5ciMhgVybDj7H\nRCho8SYxkU+WlfgfI500KdNsR2F95QwPUH80aYlxadieopGmAWjYildEIrc0\n9dMpJRI/HF3Vv7MLAzlvBtjd5vqCZKRw1psMOcoaR7FuLWwVSnahF8shJfwD\nOU31VSkSrHzODWxVufZ2ZqvZdJg93tBkb6j87XThdPBp8g4hqcJxj80GWrzC\nN4Ehl+2oIdhMB6DKvkN2+XEjNWxnb84miHd6E+0pMIf66yZz4aCGRFc2u7f+\nogafUQUTzQe34ltLG+N6MffBB1XrwOjjDvkKNhNka4SO+wiq+jkgJwzDyk8q\nkedYEzt1Zwu3CyfcpJVXLUXXWZr6SWzk3RcBSyRthQdqooQI2TbcGyWZGTYk\n98AGO+KmftZFy1Ds8Gaxzg+kUl4hz3nNbppiKpqbmi5WrNDu+qqPE+J8kh+P\njg/W\r\n=bxNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXOLGfbOIfiPW+C4vYrVaNRoH2d98xscCsq8InnmtwSAiBYAPybXU/xd7lnT3aGo7Rrl1q2Sk20xIupMPsOTEntiw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.f1f34ee0.0_1613161100496_0.701316365354477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.d84df029.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-ripple":"0.21.0-canary.d84df029.0","@material/switch":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0fd56a86b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-k5xdheJ5yYpvQrxkNTKmHzcwWbLOgLfyNz0KQ2qJdrlVo1cktPYxh/F+Q7ytvX0dRDZaSjQTvwiAEzT9hBySTg==","shasum":"a3204cfe108e04cfb6e6d86bd9c0d7ff02cb59da","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgoCRA9TVsSAnZWagAAfTcP/iyFKbGtL0pdS1stbJ54\nERXKBUXvAhHadK2eDdTiOdBZwuiqsHO998RC19HOnVsM5nIQ9k2wjcCYdSxa\nedzjadcGkgiFTY7KJqH5zpXISk2V9m17bi8tymeEM5YwxtbBPHlq8Rr4pMnU\nGudutwXJMMmZkumO/uNoQRa8QwPPfH0HodhZaROmvrmbW7wAKD1eITdFf+TJ\nKNyEMeitbBdP9KQCsLnXe7VRcnWfrwOdLMpZfvwaA1VFhoIsY/tlClm57jxw\nPOioSaZRoTQkWJ4Y+p1NaqJiUclpGSSCNjNFLQ3Zi+Qi1ciM/ZzwkLOXxWMz\nOTUFR43KC0SVUPqLNPFdd1NEOSQXBaLuuurILADkKUtjL0K8EdPGwDwxD49f\nOPpX7VcHrGI5HYdX6qHtL4W5wiN/3PVwHnttnPAS5moOy1eLCN0d8ddrxiN9\n7/5fVHJ9zkVvdpfZ3+Fa9YWkRvCsxqipoirQkYwW+2t/asXunqOoj2tuKPRX\nnufcZWO4V5lLu+Np297KGzo6fmlEMtR0hes+HLt9YHUYV/ekEErUVxxQ468l\nlElFthIlaim5O0UWfgSDMw82I3N7xLGcLVESMvWiJ1ho7InQRFq3qXjTuCrc\nqoD6TJ34x3/ceaSRCE3cbo8S2pKKECQoVRvK8wT+bwaYS98zeD7ajIHYjXuR\nmLkB\r\n=gxz+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQW2ggQMMm36rT3vTpeUToAOMRrLBhgQ+E0GuzGyQB+AiEA0iffrZSoYCXYQG/UvVLsMGFCuULJGCuTW/nArmKkYcw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.d84df029.0_1613502503891_0.27065950442556286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.c525f471.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-ripple":"0.21.0-canary.c525f471.0","@material/switch":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.f9cac96cc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-cvi1z6TrSCUYDVWh1tQMs3+Gutl6UH3q2fvWcVXjcyVQX7FuXeU+IFwuFYeFJp6DX2y7reD+c3ge+0jBah0mbQ==","shasum":"5fab60bbfaec43fff743118436df62520cbe3292","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJaCRA9TVsSAnZWagAA3kUP/AqAyMB4Cp9YKkCauTob\nObanxkMzvGDFy/GXer351QL2Y73bJZxSsASmFFAWrc04urX2JjlA6AwvSTxh\nNWgYuuW/tGQkEl2wJ51TP+vnoPiZ1yhUV1K+r2piNFq7wBdx67JhlUdtTImf\nSPcqtXRzB37n7gsTHh07dK9AI81U6czX3taNCx2Or1JVpwqq3QPlUtLzlHXF\nS+J1jvfr9CMixFbRJ1Qr0qz3z6d7LNcIpJH2athRT6XwEmsEX3xHoe12NUqC\nqeP3AIThDGtadPcO3RZjaUxnWmAfk7De4XG+avNcPvqpwj/UfLSGZFJidcmG\nf1F2yGQidu2LP48rKohL4w4qzrnHbUHfUSci3Y2PT/2z6qjCJuXb5Q1DSkmr\n5xWMTtA5WDWS6TqqGIYD3gsuH3A0E+mxe/RJ4jkMfi3VlpaNTtCV1uRfCOw0\nGQ33jBIThjvBkzZy4SMDot7RUHrM7TBT0p+E/4ykkmuKAze9Uf2tyC0sNIKd\nYLbd1cGJrWIh3mHgByhuAOMmmJdJJpqVAfFyQrIYwU442r/ZyE93tKyvTbsm\nRA9PIwpOdn+bXklPfhj5ysXUMZbq9gOZR+WsFrwtmm+scQ5crVBux9BVpXXq\ngE3C6JDKVm+ku+6K0cUAOC194nqBWCSPEdasGCNKxn4ySAl0ZbvsCcP99Bg5\nSK+U\r\n=lKvU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYuFgqUjgTQ/DUuSkBWepxjB/VVw5exb2+o94gPbdgOwIhANq5c823o/bz/ZCzaz3UsUHpufz4acyufJ/yPtIpwsQC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.c525f471.0_1613595225692_0.6329741133266313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-ripple":"0.21.0-canary.ba7a1b35.0","@material/switch":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.f9cac96cc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-B3CsthNJiijkwqxVSPGGgzm5mpeaOtzHkjjLCDpiJclnDTNca0yLcTlAzP+dAXoP1f74imYyT3MDS0cNM3Gedg==","shasum":"7e70613e5e72aa63df828d8b3d4b2fa8e772c352","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLTCRA9TVsSAnZWagAA4rYP/iTLptfvpc3U5GRSC2Rs\ntYdY8rTz4Rj7h7fz935vkZ7+46jRgSk3xUaipiVhgRp5IUr6b9AD3eTrNKu+\nvqGwuo9IJQldwmgLgP8E7ZdecDTEPPhvoC5SFtiKCNc0vddyBX7V+mXKrqcC\ny5QMCr8ni5byp4VbZcHPptS8aa2R4/F8XvdQDAOF3tB2FwlAwr5gOlKn4/cH\n4fgulL4r/ZJ7ApwRO5lMPJwF6p18QjA0TKWEVmfIBq1NioRC1TfH2Y2OTVik\nbPyfkm7IEc222qKKjMsvFEzL9g2zUL7adTE6M3kD88l5uacJxTkkMsGQNWHa\nemiPmElftrHtPaNDVf3qIvHxESu0GaICiel8WLftW8jhLaPgyQxX511woxde\nLJFClPJ0165WM+D4hB6Dca8CYIV3B1yQgVwu9xFxm7mwyHCh1vdmkkmQTgMa\njxLh75XexiLtp+xQxm/6pdWF0Sabxk9JFnyJkpktFPVHx6QGvEHzK7ONcpSL\nAPf3CiVyhrt00c3/RoMrE2LqvWU6NhyL87DmzHAcRE3rrZP5HJChC0ZOsOym\nofwZkU44QSed3y6Z8QGPU0yPeQKxKPQA0EX4BfmZsVEWw+UY7LdpW64bQsct\nQHb+owGOb98el1ji8dDOs54kFinzIY/yc5vVO37I6s+VaL+Hfcmmj4Y7ir9b\nXXTv\r\n=7Oyd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaJDNc+ufOk+Q9kaB9p0aY00DUOQNYna1YsNaio1igywIhAOLpdIUQ2iqS+O4KMUvf+ngAH1t7fl/nnZzzFmvZLVGp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.ba7a1b35.0_1613693651115_0.5691822680374463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.9a566dda.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-ripple":"0.21.0-canary.9a566dda.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-+xALsBIL9uEnzE1BgxL3/nmjKWX6td8N8tN3yCXDXmwj98sor9BEMtTXsRjvTem0PwseAPJsQHtJUrSVRSQZTw==","shasum":"792c7114db68b86fec3195eae1b69a290d1e2c03","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWfCRA9TVsSAnZWagAAIfsQAJK2OWcXe+zwpXFSV+X1\nU2mRq5YgWpBr1T0stlRreUAUVeQFrwz0ZLa86LCDeC8P4ImznUIuNvEWzJNY\nDrZ/pO1k0u+RnQZc8VPsCWrciE5Lqjqa7lQeF7nRmIncDItbnaOK6K71lzNk\nJ6W4iQxqIca0e86LhKg3+Tq6P4ZyrxSMU7RNBTC793gUNi5NUaJhza5z3S91\ndsIHEQLH7Ovcobd/GXF6JbZpCUWz4ysY0tTACSUZmQl0iG95E7DlCftiMUzg\npf/GJiKDBDRFzJacJq4nq+fxkBwC5vQX5Vn6LdYs0wn/D3ATYhl0EgrkkJf1\nc37eeqr4CiePZbxj2+d1yFRo505mPO/tmaJSJqk8Wrzb2yWjKkLQN/pa/KeA\n9IDrgzFhyaUT2QcFUgQfECjTlLmPhJ84z8ZQJ37JK80l/BL4dT6hSNEygF7t\n7WFSGJw3yUUVZlrJPZ2GW3G6QaLcavB//7dgIwXn+GdoAe/5kCQpdH9oqioD\nB3dluXE82E9L0R82xp4MtSQl/4iVPlks7zRvEBacjutAphikNcFLUmKHg0YJ\ntxl0jOhxqycnLT+GyoC34SaLWKhBzglWLTq3uS1YagsZSngsWyLH2WwgkTE5\nXf7Ubnn75SMpORVfhd8vxUevYFuTOkXLWenDsEJhfd/P1W26PQVhCt5gtR/0\nGOB8\r\n=f/Li\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdBlkAZiyrybdQ0qOC6LBPNJdcczZ/tUP/eyEGM5dN8AIhAJytWcUkOvTwOqr5tqTYdgZsQ24RkhAQ1dZU0ao1HGr7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.9a566dda.0_1613759903422_0.7979255156162477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.55addb8c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-ripple":"0.21.0-canary.55addb8c.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-e7FQLppE8Ou+fOGOo3SxvIZXQ2GKTnN36daXdQeP1YOQmYT/8XtMExeu52b0Q6iYgpoWku4k2/IjAeASDd87Mw==","shasum":"b97b6fbd25c90e80ad2b0515d0abbbb5340ba1c5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDV4CRA9TVsSAnZWagAAna8QAKRiPl9sagQDu7FFvupE\n7EdrztmwEQB9SOrhJFCn4k1ze692IUlDYiN4+ovHAhCz1dsvgpJPB8GdeK7+\nUXA/ZDyirmqvV+0bBTOOgcDfJax4kI/4qwHwoxQ12CAdVAA1QnuOYIdU3VOE\nkLtNoKKBzn2Uk91Ah8hyq++h8RfwZAJwsJ/zk9XIC0WzPtkxdF4h7xirV/uS\nNjvMmapi/xo+7A8a4u0KBq/p+xkhssdCWlkph/ir4alv2fDRJACm4JxsIgB1\nqXusRa8fXOZSOQ3Xe1z/iga7omlCDGpTiTDYHsLzZ2iIX/22YztG09lKMJmV\n4kHR6978ZTgbIKH36LAY1wDYvh/h0dwm1RuALK02/VV8n5Bmoh7T1ywQIvl8\njKH963xFp2JThADfjzzlUeDf7HdVhGCBzSil2nqjMjCG5v3vQnIz/UKYZmIX\nAafyA2bV2CfDBVBnK/Lfn8Z22b4ItI5jIVXi39HL80TNu0gYvD/+GFt+N894\nMAANHk8R0IfTQWogLwupUpIT/ZsxWvP6J/qwyG09W39ibrxhgY2LqzdnD1mp\nnLdIVuTHGLgFqZ1gH4ms1+/FEEiAQJRIg3yolrddwxogKBCXKuHoDF3Cd9v6\nDX1eNDUsdqlQvy5IgIdRQy2XbymznkN0F88ImSpA1YTHlIN2CtQBRU5bftWx\nA29s\r\n=mhKO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwIST7eruc+NgPo6oB1DoiyBhVBbTt03kvbX6ZtlPeoAIgYcOZcxEm45nQR2EN7AvzhhktHrhvep1ni58Zbqem4sE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.55addb8c.0_1613772152461_0.03712442675905869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-ripple":"0.21.0-canary.85dd5e9b.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-E3Ae98iFyPuc/Q0f6Io/R8Y7JP4/eFUgMalRcyqTU2Tds/N/Iqe1i/I1nNsXhqy7Z+9x04kc3VYKMVMM82EhtA==","shasum":"aa97a9478c47cc95ada6a031ad75ca16347e6fc6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":43143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGY7CRA9TVsSAnZWagAAodsP/2eozmdy9BhbRMtFA2tN\nXxDCSaC8pdrHFeqoEyRPvWwRp+exgqhyF+aEyPwPat4tdwMvPj37S5qdbAge\nRq0EwSAAB2H9lZMvjcjLdUpDiALrQ6wZ7Ga7a7dLVSIfyFez1m7lG3wcoJDr\nJhLdyp8rkjvLyBU3ZUBQ+xQjp04gjRYnODE7PB8HNRG26yJXEg0z+Lti8epx\n8mRznxWU80Hjq/YsP9mve9COQJgG4xbqvKQHIfKjw3+Hqpddzb5oHueT+1k1\nxVYn8SLz3weQvUxo8oaeVAv6ivKEYIrmTsWzmTf5aLyRzjQRyqupZht/NOzQ\nJUf54ht+7RLzZvo/jYJJsjmJK3ghWyTFP1KZuD+R1vdsJaqf5d45mWmMrYgW\nsrg+eYsLgU7PRtn2QqvGS3MmSnGUn9GQismobzdrUDQwhN43sJHDaRYbN8+Q\n4hx6f3gMwV/hahd4aSi3kl2bHS1wS3WT9Ilf33IlLZ8Je9PFoGDb2veps1sR\nvt53J3MDIQM+VtnT7ENTjNuexRM4lmMW+JyVhBCyz4EHnnlhLHrCVrW9hvGd\nQ5tcF0SmfF6H46rb1TWBBx5lNcZQtnxaLdw1SpvQL1bV4t1PPwcK/4WB4mqG\nFZ5Mpvyugh/4+2T3QMYFTNLh0ruuD5sRHEhDplxiz/B1vAbfsV8pt5hyl5ve\noSb0\r\n=FSi2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4eIXwndYdxDMaZnRNphO6Mm+msQ1aekkyC9eyI4mhlgIhAIWtwgTB0U9hlNu+cNB/8mSHkM+4eMQf1v0WTxpsbqgp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.85dd5e9b.0_1614046778633_0.40599244906189225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.aa3e078e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-ripple":"0.21.0-canary.aa3e078e.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-z8CVikpudIFj5JlkbN1/O30eJ3nvkKes+/i3JgDZsPVZaDnlJNDZa7721VeaSUuiMNPtU4kPo1LpUymYPZ+x2w==","shasum":"dd4c4758f7f73a4b8fffb7eba7d5b564563341ea","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgkCRA9TVsSAnZWagAAzSUP/jIbo722gQ36T3ciC0Md\n69JjMTRnVya2egLYElqP7AO4Z+HIKye9J6tMp0jAP6DNmPD3BkFeXMARFca2\nu1ZhYkAddHgAJ+W1J5lgwsAP4YhDn9/3BwOUxJ4wX0O4168gcZwkwDFEOFS+\n2oFjYCd0MPkKqiWdbQ0mas/lP1+agcOfvil7xgDWhGUTr4yq9HkEH3Z5BOpV\nVq8qpox0zLN+9KbhZfy5OX5p0T98f6ZE6uGZcvFozUsHquCptXivuFpo/m/Q\nNsyUFYxnXsCxzRAoZGFRtQYOmEsz2hCN35LUqHQHIbOuUFjdye0N5R96C468\nUGcekr5EElJ+Hg8ARgw5X5ch/I+mt9aqEbEeAvvCVde0x+4RKheGFJkpYcj0\n0DXBNOOOyi/t1Qa3AP8B+yRvFHmaDMQSLL4ePFbzNnnwkhK/unQYC3gzO5OA\nrh44XFaPGXE7a1uKQE90HZKpQActTUBkPHfVejYNyIBULV3Vmq02BwM0v9z6\nW+DMfUY7IDJ1gYX5V1dkpF4kNs+hQbBIBb2KJxufBlj/16KqPLZ2RP0/BSIZ\nQUvwsYq828qIxpnSD3WJadQwu+RJlXUbNohCC+2CK51YNUrYMVxXeiwC55OP\n0Oj85tYCPKGSM0mocyFa3sIgC9sowby2mVMlNRYgBK6VAMRNfaBvBi6ktBwo\nwhPU\r\n=ReOL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH6uicpEUU3AbLIakxcGZMqVDcp107LdC4f1YnqYF1DgIgAhlmzaJuBrRhnuO2ITNc+z1E9sgbEwhfmD62vLHBtOo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.aa3e078e.0_1614100516060_0.17979551441750585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.dccd254e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-ripple":"0.21.0-canary.dccd254e.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-KYg9O0nyyy8eSUUGsvRan3I7jRWz6fEf1aj3ZLgiQ35EF5ouBwvtpmAwEhYv/Q3MDQJQuSqh+mTabHU4LrX66A==","shasum":"258dbb75aa0fd22bc444cb08415a6a114608b7c3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPCCRA9TVsSAnZWagAA1zMP/1h6FmG3Ub2SUQIRkrF0\nEdLOQI5YVZSg4ENo9Dm8aApHwMpheS/xuOQhbyiuouFl7A4Miy4U79W7lGNL\nu8niqI6dPyd4u+e58wLD7sfCnkHbwvUD3SL7IfL0v24hEO9Puqy23Ky8yjVA\noLF2+nYGZgtaFSvsiEbhRSRNS6CDaum83XamAmxVszusbNKs6PNlFWj/CB6U\ncXJEMcS8/Ia69ZgZX5aB4h8uOpaCYOv5BUmW45QowsObTX2c/ereH+LLQK+o\n+jgknCop4zoFV1t2debJydz2ibrocOjJZrrh+tkfa/xlNLFKnrB+PeFbfwm6\nk+G1pZprpCrNuqYk3uzrNCdMpHH4i+JO94LbOCToRrnIZPD1xSxX+MWOGlxJ\nruagRWtnUXztuckclfD8J915kWM5ILrLgSDaeingaHuPaBVk7yJS4aQGq+Hv\n7FlC8zDQpMn1SomYEUw8bKkGkV1pJ+74b9qByqCpJhDLPX8Fwv9cXXu4oeef\nPByZuyu8vKcDwcPCsod823WrRecU3LR40ibFjNpQQi6wuz3RvA/RL+OJBeFi\nhl0TtLZ/5w0KErt6nrcpQTX5lv2mt8wJjFXOp4VZzxRFE+UaciTgr9PRdlxd\nrbYKUkTkPWzhBR0ITqpm/uXpNTwsNZGXdHE/rigpwqYGL5yVnTYGYNAefYel\nR7Vm\r\n=PMni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQMHf58bIkWSOap1rvnCl+yX+eCjm6yPCkyjH1Sm+HAAIhAIhK6edqFwhiTUt/NS/dktbSfDc5QHpNfztreTm5B2rr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.dccd254e.0_1614373826431_0.3022769203596889"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-ripple":"0.21.0-canary.7dd1a27d.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-quSFLN/wp5XPk8yVBQiPaO045a93g1ntnFRYGxuYGMUID5BukntAqZo01EohMTw9YS1yFizcVAYekcQjZwYDRA==","shasum":"94995205973ae02a3ebed03504b2ba1058194b3c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":43141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQ1CRA9TVsSAnZWagAAyFYP/jOCIpITu5zj2Bni3KXH\nC51qWIkidyeUaEgeJZ1CbwyBwK+Qt1wKz3XJRsrNMDmcsA35/wSdH8YWtJtr\nwREtUWQeHGj7LKYnf11dEy06kkBSsRMBkXi3TZeVr2vShmP/RWGqz4Po26XI\nKVG1uXpsohb96LWnsHcfrvEMZGCQ85ln2DVUWjmEpfL8qRMaJbYpZHHWJtp+\nS3aigPojNfiEEtx15z7oPId1VwRX4uejVEQSeKNgdnYBf5qF6zdr5UcnQw1S\nJrPxwiV5H0cyd9K2nKgQFyuc/GZG2jhwyaqE1jNHhXx57npC6VKPsGZ/Ie6f\nmXNJYlr/r2RT5/EMWhI1rbcYSUC6cm1gq2t2BuRocjGKCdLdgYX4VAXIbM0c\nNY6qxQvcNpftp+HSRQ7xMIvOv+qKd6cfCcTA9JzRKTE2PTTu8p+KOhQYcail\nVaZ3XDZmYJfhZY9w8fGA6t+OMKVqB7MDekNfad7cPdBQ2EDrtMY8Da6QIRm2\ncF0ZoANfQ6bXD5dpLafHfFjehqyW7FHkL+7qJekZWKFoQWbLe0enKQ2qdwIh\n+6+Sgsj5Tos35kxhdsnjD9sNfmSQsXEF/tDBgrmJFxg/A/kazvnT5iT/xZjm\nNNj8hMHHRBUfbzM0ciDApUr9gDHeWUSqkOFuGfEK7yBSDSNmDJqudh3Hvy0I\nyWCE\r\n=IjrH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZDcDjEKsI09jT/htEGQgDO+5rC0kvHImjE20H2D0dngIgTtGgHt5OajlB8MUi1pMDkRfiJJ0OZBO6IAycZb2m6fQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.7dd1a27d.0_1614636085418_0.14095065972851772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.12574572.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-ripple":"0.21.0-canary.12574572.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-s056YfcBUSV2/J8z4BaBz8+MVB3Dqj/kO6B8ceFvnr4JW/+jDC9P8/DDIPF5TS8bP5Z1vfHQN7aDqYb3ei1usQ==","shasum":"4ed0dcd7e8c6d92d0d94775663cec930d9ad80a4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqA2CRA9TVsSAnZWagAASF0P/iZ6AcgssGl8idZt0i8M\nF1AhQFS1ogwjeUQ066gNQ86UBL3MhVNX7PCIclR05reV022i6cShygb73CrC\nV2+xICSGVAC7k7gMsMW8bsPmhzbcl7ZHGT9epSmD0q9iI3T9uqG53V6/2+kn\noSxoWD2++NEsTGIs0hRZo6ovF9od/81Djl9GnGcy8jzH1fOUPMRGwphfBHMW\na2c4yXdkDZJQ2bLrOraSs4+aH9D5Lk6Js8lbRAWXPugqrqCN5u3wU1PRwf60\nYrG01l4v3MBVA9Nj3Ow7+nQ6laiSLI1LqwPV3K9utdY8JIec1JIhrRut2SsD\nHnhj/yMOJ6LdAzuGJ7KSX6NvzmM11/oUKrF/6f+Ae97G3Y2Kluva38r/H1ci\nnOJT/NzhUuBFEsT1oE1pCN5SbcaoiUoGHRMlBYgUZcQHKhJHy/d4JpA+tmAt\nPiq1ZZBq562cII0e8qRWK0LzOpzf0NP2JWD1mb2OzE3fNaKcHH2EH5g1oLnu\ngE+8lQb0cHIIfwu+uZ3ITLzntbt+zsFsoT/PSy8fg2g3HfRG/LJZm5ESKMe1\nrrsOJYS/NPEFQFOVu7q0Zrtgy/+EukDxSPEWoFS3yn+pEuzQNwfJkFE03R4y\nw3ygt58QxVPzVAExNwH1LHAA2ynDb/THvYPGPtKp5PQj29AMHAJhbfgevMRC\nQuhS\r\n=ti4c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID369ZZQ+nmUKft+Q7TU6wQUZ9uZq3VZYgZcb4krpE7vAiEA4GivGazD3I45H/17tcTxSgO9ozeODzn2L+luTlyfZ+I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.12574572.0_1614716981891_0.36986754410421874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.1109a3d3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-ripple":"0.21.0-canary.1109a3d3.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-gmZEklc4T/nbLDrund9Weu5hziAmggOTCucgZ3q4OWLXz/Z2CZmZVEOBpGMWOt2v04Z8jeYyQ3qlUnCcDSGc4Q==","shasum":"df0d8bdf31f3ba96d34304ce843a91c197fb0d84","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFzCRA9TVsSAnZWagAAA78P/028G4jUP/StqhKZ+lH2\nHgx7FZDzrRvx2TD0MwkmJOm/YONnzU5wxoVAtXTs3ArQxfqHpppOlE9wIukN\nsZSZQBbNYIR5H7pOpe0nXOY1HnnKFkvEiTB0ByIgir978Lkeaq3utw0DHjND\nb/DcSzVmLPVIHZ6LQDhT2zfnYzN9oKtCYMTuXaFYEkV6BD1ig0m5ZZVVw9be\nCK2q3Zh0mOgT6dB0KFG+ut3RC7NqV7jn5IT5wOaFI9K3lAtVoC9K2zfYOQZr\nbGtPgaUjJNOIwSs/WyLfm0UUKEHqgoovdvS765y2zqHBhw/TVg4qM3ZQtkz8\ngM7ClID/IMws8eBmJtEpghna6B3T62PeuD82YEWryPYRQ0qxOyHjMtxy5LgS\n5foVHJsSOkcJ0/OsaAAxq9YI2YUJUccJK+8Nkb0G6gjfd3nldbU25J2Ve6m1\ndJ7WyTT18GxqM2W7h9B8EJgvszkIQh+qgXp4CCRIh9XAPhqm13q44M2yb8ej\nN5b7zuDm9mjHivejx6KeTUbf6cdvkHEvIXGTe3S31R+2uqvLG3BN8+RW74w1\nIeZ4bKVlJhWnAQDWkhsbYag360UjuSeOjx19NjAV2ZAJ7IHbe69ZrbQ9VajT\nqU/VRHiT72k8PjYqQHVMsjHd3E6QvPUe0NrzSzbGWE8BXqeB9eHaK4wDTtSq\nhs8r\r\n=go/L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC907cOwYZbzgwKLQuX+Ey09m8hTBhrzvnXsiHE/qAAewIhAOTvfNPvZ1JEd24+l8ff5ySqBRPeZvf+yawwHnqIuE4y"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.1109a3d3.0_1614717299013_0.22595903676904183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b9cd8739.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-ripple":"0.21.0-canary.b9cd8739.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ehtTWExNgcjK1GKCzNBQCXvDqwojNGAGD7tSxnqXTOovvX5ScrHuKZWAeYz/QlEhofcBAvfUkQLnrkrz95+Llw==","shasum":"dd4cb0c6a81accea920a7b45a8797e312376a1ea","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8vVCRA9TVsSAnZWagAAFjEQAIFXvMZ0L4FE40KF8ePi\nHGSvreT3voXJ5+eew/IZ02C1Av0AvcXjYe5jR3Gb9wXaaAT0KnzBLbiBzCbK\n97zAtAhWg57cbUsWoAZ+I5AiT6J/WBxZcO3vdg0cjcsJnSp+e9b/2cVYtEoc\nqzQ8m+2G67Y51uhBCWh84OeT2VJK9b84qkIX8ptu/Efp7ZZ//nRwIvKtXcpI\nUoxFTNJbW9v3KZ4LLsANs2gSl0kYstGidYoL9h7WL8ftX+aGRZAttDmMdHUd\n/VwjW1RAzPcbB0EWxafAo2jk0cwW7ebvVKTh0TFFFzUcA8sr/JmbqqYZ4foE\nZnQ6PfKNBrar8avLev3kERN31/+2It5tupjRzYaNxWXqU1RX7+lqq7B/KgoH\nJWSjl3W1PESoEX8AT5oMolt1EQRJa4tqbLIwHLNIr/127egFZrI999Mz/ZVJ\nia/ovECUhmt7SlrthWHLehR/6RQGzeDgOQuagP9zYvtbH0x9cMcEbQX591xr\n1Wv3t4jLkVRtrHMijWxNMCQQPfVka/pme6pM186Wmo8T1hZ92C+VOUzQorOq\n4ClMwo1W5grHUL2cahc7vbJ2dF88KSnLhiRmp6/II1Ytw8Gx2OPD9sw2r7W1\nPLRB530Tr+XFbJBNWEs20uycK1sdAL+nit7oP7TiulqQkZFecR1YjaSBqjyx\n66zP\r\n=X7vk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8ZKD18P/yLIWuR9irGo1Ro3lIV4F9biT+duozNAt4EwIhAJBiJGaB7dXvAnKWcjlZT3+WanZ8W1S6mX8cCJEsbrVE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b9cd8739.0_1614793684884_0.992133613161919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.71ee796a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-ripple":"0.21.0-canary.71ee796a.0","@material/switch":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-brb9E8TxoHCGDrkJ4dbykNbCZAn8yTB6wZzP9IPF26QEbVxHnvt2hF8t2teaf0AiidcM9CVMdJCPEWwNFQteHg==","shasum":"0b71733a511be33c0a35429315e948a50c9ddb4a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1tCRA9TVsSAnZWagAAy/UP/AkA0whxA8wSHl28+fjR\nWrxkdKIy1NAs4/9lMgRlhzxiMC6CeVzB6qa49j05Iu9D15R0eDL4FLsZ9wIR\nENt4HgGKQAYcrIhp2nKc0BPdq0Gn6olsEjcG3axrELe56jvGDfiTDXI/7/kE\nPvMuWIRd3SwzGeJ3gd7je52ErGsIfnyxsb2gBPbWhMCiaEGINM+NY7t+I60u\n3gsN53kIJqbn4xiCCLZnavKN7Qf5V3rerW8wn6FcoQouYKtnDSmviqDMKt31\nPdQAb2wIUN53NqCnvzALbkYRVAMslDK0lNqRY1aw1uaOe+jMb65B2kJbjolQ\nB3NWxCPbuQif7az6ZJrg5EeUUIXViWtVzhSowWhDIvw1zrP2LLle5jqkjZRl\nOHOxbTvBVqLfPTB3YzuVi7P7H2PIq9+OKfNxHoH5nDFIwlV7p8an/veqz18q\nssX+F20LHM3ygmlX11CDL0ya9fWsq2Si1KWrbQ0pQfd+3CsqShMvG/vdTwO3\nBDqbAMVMtn9mJD7nwCcY/1LZHXLht8jQqrjGbxj0vfrRP3ZHG6IhzprtvO7d\nHtps7Dbm7E8dgTMe/mYcHtVbg0uwen/BNf239LjJ/gLvD4rzdmoncQgttIFm\nDYoQ1G15bN3ethfoRASb3r0uy495eGfrvYr05YQhZNG90EX79LFQC2j4rGm9\n7N3Z\r\n=vwhY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6WCiUwBh0oH7BYurxIuLid8itVytI//w/hm2PFmUKeQIhAJEgMU09vls4HxYqVTsfSx7/TG1bSHlpxe5WJnoa5qJS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.71ee796a.0_1614802285152_0.7781752976258545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.2be191ed.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-ripple":"0.21.0-canary.2be191ed.0","@material/switch":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-8Jp8bJfLVviD/Su5Gdf0KyT6tfnlTpr4V2Bem5mHfp5xr+7sJ7aQpj662n1eOtzk3RJWch4DqYb47QTC+FIKLA==","shasum":"9f82d81ddf85e4d34afe4e2987c247d9009ddf97","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAT9CRA9TVsSAnZWagAAGBsQAIgaaNmTQJtvDwqEwimV\nF7UA9CdVpIMbPv3kDZ5kFtLvjiyj1YgxAdc8BTtGjSHMwfgGD1SwE/eu2FRn\nkYV1ZQCyCYhdzbf3DRB4u7VRbXRokMaT+82s/7CW2YxRD3+WsS6bz3jgy2kk\nZMkCcELz66FfQTx12EcQs0dBAk7Jr41jE5YQzt0rQwB58c9Qsm12t9xE+x1w\nknLPHxJtFH4u/jtQlb+TNVTS/FbFq2Hj7hRkeKLFIhsAFtEvyPXsd8AIXdNm\nkllKKGgj1F19niDaZ+CaCFsT4dzAkNyTC6hOk2zAel4wI6MSc9fIpylusv7q\nFk6JtH2Ot03ErhCEMm1gPzc1AAFMeihYWmVGHprnfxSu5/9/7ngaORq5D10I\n1QDBN93Vbrd1IY9zjlqvmnJtLn4HbpyWtuz5Ihgfpu/UW7fyXKNdH3l/GZfO\nhIyw6+5coTMBBipTg/+3YtaNWmh3pdRjD0TDf+GL1lhFnVOy9KdytnkVuCXG\n2h5CzLRwxxqcuGJs0dHADVkFFLZslxZKSHw9wWg9YXDAOVH1ZPCF4nPF6j+Y\nVIucVa59SEuhdStfnMds5hlal8K64Z7lmRFC4ZJAMyAYTy+RvW9JGem7zKve\nHkt9N5OrO0d2nAzE/h3NlBuUYv3BO3/XjKHCsNjpZmRmrqlEvcc0z7cxq3Cd\n2FyU\r\n=yFWH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuXhxMSuUEFu1A22/z9tThjEgnM2/+fIWyBKeQsM72lgIhALuHfeEqe7/qf5i4hYm4pwSDY1wtjotgoPTdGwQm95ay"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.2be191ed.0_1614808316827_0.2125444116647559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-ripple":"0.21.0-canary.6dc7b06f.0","@material/switch":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zG/CZpVhGIrOH1TSYgT0yntaAzhjsroqMFgYBa/s4wLhrfVkCVv95tYAs2w24WGH8XekN4r6lZc0AzPMAPaBiw==","shasum":"7fb029d0f3fb2206f4cbe0d9894d238629856f1d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnMCRA9TVsSAnZWagAAOn0P/jIrHH2lVxZiyIqQAz/h\nvnhg2YMacmAFi45q74Fr4U0sopRUkXik4QMEsxs5iuTUeMbeZFYRJm6dZvTr\nTRAN7XQsiMxU/we6ezB07uzejlD/xul8cEzBqA/Qrtj7FsoGCseeSa682axo\ny2Y8bsiv9JRiSCCg3eIDTCPUCU++0WLV6d9BQodlqPGCQ7DSynpUXWpifvb0\n0BDiA5EgWfGuywmypTJ5BYGdMd17Jw/+vdPm5GP7jlC+EINlU56JZNKct419\nz6rwS11ICR+JMUgVKF3tU3ZiNhm/VEC88vT0YlIVAUhq5eLD5o0TBST0b5gi\n1C3mEQhCrOv9+IZuAgr6xDJa6kduDPr1D3ZPgjNzV86ITQeQ6Cf+rEVF2O2A\nyhFTY+JV8TRSQ1wuvmaJuXJgP4ZxHvcPNfu3w1DxTLdoUpts5UmLjilL1yEn\neJWIAIEdvHg3AL73zdziS3mLNWhPsyVCVYg8rrjKQSA0cO6U7YNGHtyyf8QD\n/Q/J3aJQtUw8QeOaWvJB5jQ6G39r7II6TRz8CFuOPI8gt9MguoDnm+eiSxRy\njEgIGq0czkrLp0ZSoIYTnDMOmni2VsQKr9NW1Tekxn9+Kh4wzdy4rQblNzQd\nA1iPdEMvxt3nSIXiWV1twEJNmK1VjAwDWdZ4QucJQCkaiMjqedGEkY6lR3RQ\nFddF\r\n=9Qxr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtQrJ+G5ZWZSGMmLGqrPGNpdW8Q7kWot7cTfw/EYdyYAiEAqHDn6g42SR8CorL/UddnwhNiuXLhc0wb5CR2+uOBqk4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.6dc7b06f.0_1614903755711_0.6284615498747006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-ripple":"0.21.0-canary.24fe7ba6.0","@material/switch":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qCWs5Nu0HZ5mIS0WpgKDGT8/TN12kNLyG6JU83u87pXtpMJjGSloxBfhSHzQ1Nexu1168sMsZjwBNqX8OmSl/w==","shasum":"f3a98e9992b96617adcb60253d9ecde097827634","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmn6CRA9TVsSAnZWagAA/bsP/3Gib/luLeAFb2SGHKN1\nuaB+qspybtcHzNPfuRKwVfFQm7n0rd2+nkqdq2JHRoroK4Lnv58JQSekbshs\nuSGXRzva504GsF4Vm6nxgvJM6gzl1nvcC/o5CT3euRI2pOjC+WF/zSkfmc6A\nFUuSvIHf6TfDOQQ6LKgJQELHvMyUJUqko4wapm85fZgO8edmO9xsvlw/GbL4\nEp9GDFTxFAYJxKbT+VJJhZBDZoM9jWYyiln2o9BIHU00lWPY7IdP5Nzx4e23\nFNH/DLAMUoBWly2XuFNXwqkq0RiM+PHeabGZkChH0FzTwGx+wCoPOzeaVBZ9\n97KqZU62t2kT9wtrFdbHz/NpYYA0SnPk2ErYetGEZdvOzP1PMBbfHODZWh8g\n68VQ230RsxbGAXckSogoUus1gerS894I/4eretwGHLEp9nc/hSvM1rjk7dsR\n27z3GKmy8OXtsvGJ8CC3jm9LsdgYTuE172WFzoE5ID+chiwJt4wI7Q85QnGK\nqJ5jOO/haAYBQGvmpODmtZVr55USRytPvaczR9oFTvjmlntuzad3iTwQvtVF\nPXCvVUXLcj47LUEvou2XcpRMNDqgH3HVnXQHE9ARNcy+05/spfLXwZFEiRrk\no5hxrmXsAcGgI6puF8TVoLyHiiiDbzqh90vBrP70ykoK1DjUK7U9k+I9EiFT\nvbSS\r\n=u+Yc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe36HWZuXvZv5vcHa+aaOy5qOnLgseXIj8bcFXxG+5xAIhANGoTdQaSDJ4nNHUSR8fDFLq5v7SpzVYU2JN11Lu4P+W"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.24fe7ba6.0_1614965242240_0.8570480930035662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.12c477d1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-ripple":"0.21.0-canary.12c477d1.0","@material/switch":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8PHb9RMH09eg/gLCHpaxzET7j16JGhGdBr5X1MwfqfE9xWeJfq2ZvVFjueh0fFtl3rQvHoZmYhCTQLK5V4hgpw==","shasum":"aaaf43e69381dfa40e296cfc2b31c42e6876420f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqP1CRA9TVsSAnZWagAAIk0P/Ar7D9QIuwKt4ga6KWOQ\nv1Znu/8niC+xuihWNFxxI1MUwDm/uSaeJzuvlEQ/zHnk5ruFYpv0MontqMHp\ngHnfQvSeank0nQK3IOYHQtHsxM1lWBbpKmJm79kjWItvbIT+ixixCmKxeutj\nUOV0B9H3TnOn4/Y3jRovccOBFLHfGPQb9FjAUQFEpaoOzVMlOzy8i8OyF7Wo\nzjQxHM0JxImBGPPA3kz1jr4liFxGxjdZ7TB/qgNPo/OiN5wmua6mkv2vCXss\nFqKUfZC40xa8APh8RJ5sDs03CKEM18udNQg2O7GDceUCki+Rz+X/QYAwHUTZ\n6KxucNnQJEZdnN3W4td/NI/+LNA6VwA/5SqOjRpf5Bxbm3g9sC37TtgSGaOA\nIrFjifluNhOGpiXVRTegGItN1DL/P8c2AGlJJMEWs9BvdB72lm8mos7+uvs9\nrC9oAZiCt/+xrutcuucgMTlRzcsBbdWBTmBIo53FqHBUn0/7W0jVyQ9jkN4t\nmnCMOhPvfTG4o6ywD2OCVFoPX/SW/kWNv3BX3kwpRxJ7dvWxEkrB9M3ynV+e\ny/JPkd2f04CLDtbuAnu6nrFUhQQfq/ujAy5K5grfyVLnDtj61vc7HSLaM+jQ\nUnKfhA9vjKp/G7HmyqH2uVEJCI76EWXsbi19A1IKyVGhFUZ25fa/l5jaLrJ/\nrDT2\r\n=fjp4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg60EJOuNiWtgHcAu6um98fLmWahVjo4nZwteuVOE53gIhAM9g4L3yBynqtmJYCWpI51+JKC1YSeP2ktUrZTCS93vG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.12c477d1.0_1615242229104_0.6809528351013945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.4c38f801.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-ripple":"0.21.0-canary.4c38f801.0","@material/switch":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bDXjdh0Bi/pTKk3sKbv/ixnvPCoUicQfR4W4SxWpEmZVjWMXeKafw6mgahJ5F5YISNxiNjXOU9hToF9+fMmx2w==","shasum":"6899c1474bfd29f6659811cf67960045f7196d62","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJGCRA9TVsSAnZWagAA/yMP/3RenvQc1n/tnpFzqZHz\ncoL1ovJ+qsBjFBRWOAyyNxCOofnNWuVkFXZzHyXWzpOtcHw2tbELe1zFuJd8\nl0Nqqm0GDw8Nz7GUXlMDGFj3xwQsxvxEjgxkJyZ/e5vHwkmsASq3yJKTPb/j\n54KDPC/xtKd97pxGvIK4PJluZiN4fjrCwoIzO3Vpy2tZ1Rh8CATJFCN6q72F\ndXRkzK7EBUzTviCiTC8swUWNcc3ovEUCcgldyuj0D+jmP5ZyENnpj9ASQisY\nPYGLiLpvP464YN0uTOrE/Sa4/WkOP42zT8L/eDJTBlwbLFp7mUL6DGhCtWge\nRByJkuoEBlBTDIfeDzbNEY637U2JqlUupQsr74DeCWnqo5v3xXf3RUMVzWPT\nLXMv0Co1XRG10jpjqe3n7546EfKLAJaMPZ0zDen2mpLEDgkoLPrXxLGsQC50\ngBwPIUNCQR/e2Kgx9iC0bB6zhBGluL5BcxhzMWvCOvobiFAe1LugKMstsI2G\nIVQ75ylQtFSPEbkrWS/esKe9L/qLXw3QsyaYn8DbfU7L3PzM0C2kYJGVHOZ5\nYe0ljKHs0MMO7/lcYSpavljfvhy0g/auFi7kIBT3Rsze5Jm65PKEEpQu60gL\nrHfa0aLPtuo4Y1KkBfe8E+VcnND6YdceMgcv9GS2YNRZLXUmkDFJOmhipuDu\nboTA\r\n=TL+H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpsNvOytMfQQiaMP2Lsxm587iHeP90EUhbHH3c3ifJdAiA8d9E7sq3Be+mwofMVrUJlmCuGS0X1q7zrnYGOHXeBCw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.4c38f801.0_1615245894486_0.3103844719381954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.8795b83f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-ripple":"0.21.0-canary.8795b83f.0","@material/switch":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-54yWabNlxpvoUM+hdZruflVsfbdkzw3rTssNorPpwSJSchYrupDrYCa/FbzdSMVgMYIaieqZaliPMR+tXEaeMw==","shasum":"f9b2ef691462338a464e69fc0733cc72e371af7c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74hCRA9TVsSAnZWagAA2Z0P/jm0xVRHe1Z2PhS4iDUN\nd/R7c75SFHu6Z47ywCSA/OCOnyAZwxpC2p9PuI1UmSyABboBHGAUaafFs3b8\nuS4WaqEyQb7NwOsKEStGKj2w3qPHcEa5Wa5oVhhRYxMOK8rom+UjBNWaMdwa\npohbam+jUZNiTWxg4QKJUqa/4U7nYa+mZnLYWgnAzf44fuHZrIhwi6F1t28I\nAdS0UTSzGK9mBT7xdxbMRKjgni0bfEuTqU1AQACu60Z1arIFsI5qZ3V5Mlr+\n50VZ3YmWOwSwORLAJFS3NfCm9yMVs+r/w7UZu1nanZNIC0G+iu2k+MHlBVz5\nhyd3rH/QlErCI8j4i8bKMEWeEiafBxBdNAKDB0iI55fyl6gemh8rNBgTjM4N\nNVibZzCMw/C15Bc3Tnf9Qi2zGoVIIBP6tKBqPkVi1u6SmW6eS5e1Q/b/DLue\nen7mke0ektl86LZ4awkouDHFw1sOGsjd/pce0kEVNHsDoMIQdaimI8Qj+b7X\nxrNEcnW9+GXbV+Kyn5OBqitArcGXOLSmzIBoG0TgsbE/n+bvdGv174/C+Ys7\n6xnXuCqpqX4xgxEDk40jhNBI3fmUj+8fRo2X6OjBvfzx+Hlpvvh4qlyD9klo\n5TCIqeiJ/yOcEKTOf2gCEaz89sITMygGOLd3YY48TkT6VgWx3piYO13DwAKX\n5phG\r\n=HXay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3kpvtxx9kZGQsZzcLqRa9sfn5GpVfmGJpN7Adw+/3yQIhAKGixManPx0ugNeExH81o88qA+uxNwLp4ibP9lxm38Em"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.8795b83f.0_1615314464932_0.036447942640941866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.12b84cb7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-ripple":"0.21.0-canary.12b84cb7.0","@material/switch":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.7522dcaca.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9Ta5mvGsx9qCzOc2QEePqjrqLoX+0nV6HiTapp5WbIDQ/IJdrFssun3NuZldYbx5mdvkIc1vJFtj1WldgRyTOw==","shasum":"9df3cb82e7d5f6b5f9554d517bf6b78389c324fe","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBW3CRA9TVsSAnZWagAAwQUP+wfktDTPrMDH2oNjfvGL\nfSf7GqNDVmvK+JWbdCbjJ/Cia9C1LRcoAQK2RFWA0TR7w7A+n3wBk0yFZ4KX\nxbSiNi2xti72hNkP5dVAim1onzNLq0kZN9cdem5FryP0RFv8jkI0LcTVF5/y\n/xJuBXa7aWGBDvPzovXWR+3BJRevANx3bq7wJo60ssqS/3SzR6rDUAET29Os\nIsnuolntYrHWHYt7J3LkcfJA7u6xna0X/rGROMukobohIxsQAzSN4iHyVC3Z\nQJL84ylnyzROSQjggZeCAj6T6fQoJ1v1npesqRmkuS1tMcd+XpZ/1KW6GJB0\nMzNAK7dgo94Ye5rqjdsPOMOWRFOS/ETDhYsmCSuc+DN1SXbPpkkRnb9d4VMG\nvLp1wpIfLaaLegV9Y0kwQZzrC8GPYScA28i52+qQ+aDH1+ABO2nMyi/oYU4X\nKvXL7PyMwLmnp90kvjrAK8B1zreZfE16x9Str/cTyBwD8wqbNHP1tcifRLr5\nyx5hY83wyjgPbgz99/licZusqa/3akryR7amc9y2fZ0qhI2Yb1T1/tFqoG2q\nzt3fnzbFsAuo5j7PejJyPyd0/xH5MTPoNKeXrfmgAza6nmTTXI0Z+8PFgkvH\nTYj0lPVQq+UZgv0bcoX4DB+fBVVQ3p/noWSFShvtYxM34VJjhRXGNF4xjxN9\nfc71\r\n=z2mX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEzfVcNohoKHEGKoQhXA8Wx/Y8i344r/UJRgjK0E1lxAiAsxocrg6QSs6Ew7iBivxUvaYD9vpS93r6cUItr4PHyHw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.12b84cb7.0_1615336887065_0.6741603469870763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.6ac6784b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-ripple":"0.21.0-canary.6ac6784b.0","@material/switch":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.7522dcaca.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-c08p/zdUD8HzGxbp6MXtUtfddSp1ESwq96Y0AtVIijlQEZl6lhtG3YU8/LgLab7dKpi5lZ/jJKZFX678v7/kTg==","shasum":"445dfa0cd8312199352e77eecc0968a1f9d2a315","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBghCRA9TVsSAnZWagAAFFsQAJmcYNwINqpj3EdVfi9l\nAhXKixE7P1kTXU2AhGKl5V+CCZmAVGsM7PEj6ebY+DUMWUGm40Be1VJfwM1w\nznrPsOxwtN1BSI26Xnq+6OHIcz+TtFrR6BDW9JmDnFNz/cLTfxtXskERfTAs\nzwHmng/ayGGxLYAcva5kw993UOkRICi2pb8+nQUGPqhXbhM7anQt9MiKmbFJ\nyY6ENvdtEDD9GUGT5d7wFfZECOTkQCj56JRHpWkGmyM0QpCSPc/V89MJk3rz\nLAAuXOvrfU+spglT192nNtVZhYtnZXyGvVJ92GAxoyJrxomUuaetLuobHpKs\neJpb8X+/SFeoUAokt6LiQoCGRd5BuiNdvF1DoNNl+5S9fQ4JOi5NDepLZjHF\n5y7wpOEakmhenKso1OK3+WD36K5pGykL+r4XnGU7uJRvEg6FOe3MbyITZrCB\ng0wzHtU1c3Cx32zF75RKk5zq2NzmLJ+Owr3PcxWdsVWcFLV2zUdYuTZMfIwG\nwZKPh6Ukirce7Pa6OHHK+yx5GF8e9PwuVlOGQlYnK4E5GNdZo2Umfabj7WTm\njVy8nLzf5SXbDIBzrX/Dt64i71Jdnwz+FOpMvi0XaOR16iGeambMJDzty5Ja\nl4qnh0AvMkpWnZklzh1/1tyn5WSd3M7IqifTZPlV6JlP5nh01EPv/o747b/E\nHZCC\r\n=OBJH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd/NWtIw9/POymqxgzKD1q0LGsx4M3wSMnG1xMyJfb8wIhAKC9i6/AQ8K/QTxcUbjj7xrRyMAq1tgu+k9KRlEeFY/F"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.6ac6784b.0_1615337504125_0.22406633950420862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b6d92934.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-ripple":"0.21.0-canary.b6d92934.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-q5grF1/Msw4dZQz7fqmSo3tX/eRA1oXqhq8wt26hsvpe/9Z0l4I37zFG1oS5Zi+looxkj4v7tS8KCJ2tukYX8g==","shasum":"4379ee1dba2156285accafcb909d54fcd057ea44","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGoCRA9TVsSAnZWagAAkAAP/3rrUms2ChlihvYgJjKr\nuQT/6EMvFFVuhlcCi0xULrr4DZUt4bqoHp/0Me0kiSsg/TF87KVu6T2lwVXt\nwbVguglgQonRXm2P8R5sJn7VzMDmAAyBS1l7I0L5U9g4W2ddLj2qnuOycrvY\nUfbGvljl1pVqubNYDPdeNT9jCf/N6pKBdtBbaLQjaxygO2Srd7NQ5UxqTmWS\nSpFxK7Z6LhMXZtGtDZpfi44Kau1g1bBWE6R3ewh1QnlGKZC/HiQ1pZUg3DcE\nbRLAOjWXQ8dv3CFpPIt6UO2liPYkI2J3YAzgoSOMzF/qs3wToRmqasU+60M9\niB1ybFZtJju6d4v1fZyLi5W7AVy9CLf3f3ncek1fDb76CeZhz1o+dWSTjVcM\ngvXkZ4KuGNQZGbcye/tg4Lv1YkPyTYdyrFGN8l6HvAJtYg/rVvbCQpnEZZgz\n2cRVWa25OZekxTgMgxLSsqnuucNqYSbG3y5BROSDpzInjYmXAJq01MDaa+pI\nfXKT9UZjjU2ktNQGyy5jaGIPQyjQ3ScWep34sJKWn1zZw7qF87UMPCf7v9tM\n2S7ixcTn23QzIRqq6wvQgvKJzq+GNBDnM6ufJYOaDJkGaB8wleZb0d6ueeDx\nw/rOC2UROdF+B0duLzQF7SoI4OOS1N1S3kzwCojXTO3xB22lMy/cpQIhmMbO\nLyAY\r\n=BGLs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4r9RgOXC4zqE0C7hW5lgFS0ad2f4kwBAGVUAzn/5sOgIgOv8T3vw3uvTOwffGbfSnNdIn04hIhnyPrqpd/IOUE7k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b6d92934.0_1615413671726_0.37473116631712133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.99a55b9e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-ripple":"0.21.0-canary.99a55b9e.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CRfzSSKJfc7XaHdpM9ICewTcoenWnJyHpN3R0otSBGOzJt2Ern4zxtrfkVcjTtES5HW1s8CltOJD8dka5Etx7g==","shasum":"1445957ba30fa0f3ea6b4a6ce3fd964c0f66a558","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2PCRA9TVsSAnZWagAAxZUQAKIwRIEIhbSzTFhAUAzW\nVbvNdFp7ocEgB0qgwj2kytKwwcOzZVogEwZpdK3aGiSGZ3Pdx+R0gbuJInOf\npeMnpcd+g/4baOWow/m77kXHwne5UcJCLrZRIbTCLecCHOHOXD6hsTqoIFWy\nykwfUMoBRpNlA3+AMENz3Y/tjUxY95JzPSRMAPP4F11Wl556HNAsaf0TNLfP\nG9eTb1VuLInxvjeFQ7PVtqYPRFmRA164bvoqzlee/Jo5OMcb3PdAfdYiG1Dh\nsGt/dP+MQWZo0aP33WVU58Hg4ry7o6m2OZgGRyxlX+N3aD0u7YGuO9jHOUcD\nqIQSI1H8TLwn2jXub4ELv2baAWL/KqDN8RFGAqZKpBkw4KVhFLXn4z0SiMVu\nmMyFhsEYc53sGV23RynSfOHgACkne7q9a2RatnqoTzRcA5PpI9IvRv1fnATW\nkoQfjupqfwA+NCJejpRjFK5wKjjdsDFMRSrW4SyGxgXdXwlNRhxxe2ip+o8Z\nPmXd5Nx/z5a6lx8FJllFmur+yOg2crGxQrR7UZ4xkRxWyzS0RGaRZbsJoZBb\nQjGsKJBUzZGuRJ4N3QvXO6PSd8deBlhrnjEVK5pZAvqobKObcBJO8ZIrDuLa\npiRWTvycWHndy3efun1ADNlYdCT7i+FQr6Si1rHj+HSdsqvxQD3yVDxnJLdg\nkiYZ\r\n=InpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFj6JQlUtrmsrXL6i2q10/a6ud3SjZXy4UAgdhs7bnblAiB1Gi6y8ZksKQwhh5s1o8Hvjk0LvjLMwOwAnZzYKNYpbA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.99a55b9e.0_1615416719315_0.0997445663653731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.bb14efb7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-ripple":"0.21.0-canary.bb14efb7.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mKRpkyLX9zZ2KdGqVW9wSyYyvVWGAt2/wn/vLV++WUJh0MbXYzWBQAGBtwwVhreRzFQNoReXDZwXu8Wi2v45zQ==","shasum":"0217d5df4576a8319531f9d5c82237fb92315b5f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVg8CRA9TVsSAnZWagAAsL0P/0hkKZb8Uw2IBmumuSmo\n/K34/rc00wa3eBgKqk4kUk0sWn7QR2h8fKIn9PhviEujxo96UiUf1HbczEYq\n2/wTSIwzdsHf3Ke0++23vVla1N/zUhZM3YY/SeK52K1kZ8a5A9a3Os/mdKEt\nVJOBd4Uoy2BYbBYwZnwdeTaAQCQCMhIBzGE+DBm74cKkKqiDFzhNeTRiwcBp\nmpzWl+FLmtyS2cfv7FBZaNREk64q2HWZIH8S9SWQBHKt4XECnYK3qIVRzMKL\nIcDIFICRtBbxaQ2WqNBpB3QjOyKglpSiSjI2CA7D2kjeDUK5GFTGexX6buNI\nGshNp5fiASSxYDDbNnlY1poSkYAupyw1PgUCXwjcHffeWl8fpcg+7+bQ3/5E\n9y9Ul0dNt/zh/Ke4E7cqS2GSvT7ILICgzfn0zKa2WFmxGHM0XwBYR9O1QXEv\nljdyx3dkOXwH8KSZbajRJk1d/LNEvEa36DMLjtNTX8U9NRK/z6DMfwvlhmox\np8y45nR/S+Pb8W/nX9TCL+Rep8PzZufSIhjp2oDEDUT/wbWRM2mqI6UYQ9KY\nvNloqRrHlTQkeT2Oq1SNHEEcIzrcaNx2h+SzYK/NzHPqnIcBbOaxbmF+FFp9\ng5GMh4EDWZYkmpv3z0KiQ1CixipoWpeOG+hTel18db/oH4ZEclLw17UumtrY\nOsuI\r\n=FqB4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKgH4ZUo75wLwRJxtD9QFnMH5hEcPIVN+ap1/elCNTeAIhAJ3lhm1mZzGXkXljN/Axr9s4Hu8dObb61X4bxh6TmUGg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.bb14efb7.0_1615419452163_0.18195698642572844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-ripple":"0.21.0-canary.9ecf3bdd.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nEsKzatcWgdiLjcOPJln/lFa2bp8eax4qXfWLh3yeD4slrEN1C9y1ShPFPuFSTcK5A6C9q0CYOZarz7u7efnUg==","shasum":"f6c492a8606cfeb3921e942c18eee28a2b579f65","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWMeCRA9TVsSAnZWagAAZhAP/Ax0TIZeb7ZesTkpPbrQ\nCQLRKHtGjb4l8Nux6NLn9ectBS4Ugs72TStMWISF8pmFqsZrPB6YvCvf+gRe\n5ZhxRnil/vtG9SNE6GjlMdPGPyOlAaazTlxpDSHXK4YrG1HWlo9TrABQTG29\n+9TvtNBtBDwuPJQPipW5+bvCcC0He7uAOFWUiWAg6uM5yPRPDQ/IDNlLOJLA\nBb9W0Tb16heDdsceXu779942ljpmAPgcKs3SLnv26T3agsN9VCdjsmvHWg2Q\nvBkfrkjCvnIqRSFBT/3pQw8DhyllLkjMySFFzRo1ikOEampekImB5xOLI+mT\n9AtnF1gawX9CAlNyzbYWyS/S1cojaXy8o8SwEtVM9/t2emkLx7eLQ2wMUUgQ\nfQEr+D5M9VgjcopfihiSl1BBaDjTIntiGMoRMTiHpT/KrTySkPH0e3C6lNpj\nCwcI5NANINAyGnrBRapjm8WEz5U2C8w9R/CIqs7d2jvW7Hd8PDD4BrPryK5S\n8KCuXA2zLj7+PSAXSZGrqGmxgDOBXI1DDghs9cGPaIPAYZYQl+srNeT7vweA\nsB7ozB4WOQpyiK4j8GjPxrfMKuCsM0hkcgUG7ST4QQZBEV85jdJ063G7ltC5\n5fcrlcGPwVX+TJ9TWYYj9hfOjb4vvy6cPxAbjCQWsyZiDI6L3zXOQ9h4npEd\ntp+y\r\n=GloR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPPWOG6BoxG7Zl2EUisuNc+aiquTM2BA3z1ZmoKH0K+AiEA0uWifLn44Zvtiad5qB0Y8v2xliQkQuqto04VqxBfzRk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.9ecf3bdd.0_1615422237330_0.2505973490880993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-ripple":"0.21.0-canary.7c0e02fd.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-iQ4Dywmw9ZUldBN9Vjjf0H+Z1H30mP2eU/INS8k8baDUphKy6E5MJKgh01a2MsjJUkxRFxWbhTe06jyOB8uhZw==","shasum":"ccda465ef80897caac82acb93520f99807d73cc3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaTCRA9TVsSAnZWagAAZ9QQAKInOWOZWq/wkL+HOKQB\naSVsckInP2n7687PXbWmVO4Cr3JxiqTnqIom9iLcsK9hbMK/t76Rqe+z+18i\nAhFoUp68ZJ6GNQ7CceTHmjjs4+B8vNF0z7L5DBOO+dw6EH6pIADMbktgmaPO\nf8ABHuXCIgkQqQH9r0slkzqj2LNSVtK06bV5Gb6Dp4uHc5ERCZu+PH8GbvQ6\nCYQojnUpD6zlu3sGdv7kMjpFBXZEbfHq/zBJDNBngV9/y+BoVW6AZQ9tiGEm\n/+VngAFipX2NvC9OowdVttwI/I6o3p6HFtZUXH26lDCwtR94y+T2BjUEozO+\nurf5FjvW+dYZlE4fILfjAzoYG44Zw2Hg2n0BICfIno07Z3vU7ridczAL1uZ5\nw4O5KRG4fQRjuREyAfxtwb0nETNW6ul1JiEANsmZexLf1nNmSI8mVuUltN3a\nsEViIBicRHoCrOf0mrqtvHhAJQDWoENMRky7h6m9QuPHcTGgXJMyuUs+LAcb\nQ8riRSiw2nByQ3msGEkZp0yH4RZ+AP8V0FAbfeF5xjvAFCOevAr+LVdweiN2\nHa6Tys475JjF/D8gvPb9sqeLUMyHl10rUXzCDfTvg+u3wEK5sMWLRoM1OLg5\nEAx6OCEfWyJHNqikCP6LGptCj8TupPas2fxSWoiiNgZG4T7RBqQe4b2VjjP6\nfVCc\r\n=TzWa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCuKhtqtlIN++hLHWNMbOzBitXTko3k4ip5d6byk6mKAiEApm/nQ3QXtzRVqMrKS3ErckKqa6umdX1H+zqzhuvhZpQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.7c0e02fd.0_1615427218561_0.9154639298570868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-ripple":"0.21.0-canary.2d6d59cc.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1JDO5+tI3qql15fUGPbQ/Lluc74cS9RwXS/BlL5+rGRyK3/7l2GRRUDqT5JxTtmsbjKyWxDwUmFFuVfehM9Erw==","shasum":"dc040a2d525edf5f0cf7aaea31acaf311eba32ad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGXCRA9TVsSAnZWagAAYMkQAJs4qFBMIx7Dzw/IoX4z\nJ85Rq07A1A9lXsJakBp7aWvxBbRuxBHKSDDGur1+HvKq6y3NOAvhPQok0kO1\nKNch/fVpuTPIugVYVp7EDsTHiyRwKtgByt96dG0e/Zt1ZQ1jKqG2vmFaWlZV\nUADFejarBkeEdoxpBTc3ci+ChGTHmUO58h4oF0KKgGXRpVIXm630koQEr7iP\npZ1wEwgiWQqLOyZNLV50vufkZVblLlf9RBMsvGl0eFee1nIGcFLob2O3su8b\nMJdOpxOUQOXEKuOLVfzSvMS+R+Z4R+Cjx/IdIRbKz5IEshSEMDnBvI8iXrff\n3uQiZ8IPNjDoH0Z2fg89S3qVHTu0u+mUb773dyQrGFWrFstAwYEhr1H1yXc+\n3MNb9NpUCp0aZQQDwTq+R5de3zC3dUgC8FY6xf1bSiCkcZaovfpUFe6CJ18q\nyvwFATFGWchvh/Z1/o3eu5m9XE4oeI8WXfrhajZhZhPHrN362LLduW1GExly\nYYKm9EQ709zRFn56wZx6howuluek7SbPosiypQ5mL5oX6EpbrHXL1Re2N9PG\ncSeOn77Bl/a0HANXmZm4bk8M+z04QNqUgih226iz3QTFJMYa0rgeLZdzA3sF\nhPApqsUiZVJsnM5G5c4IVmXvZqW7w/RoA2jqRCTICF14ur1rH/INYNHVUgQk\nRXQV\r\n=NJb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDXw6+8cECY3WDePDyju3exx9rs5FSxazoMfRJEQ/9hQIgRY8TRjIXEuIfx77sBOHP1PIu+9bsml+Q6RoYTL4MIOk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.2d6d59cc.0_1615487383559_0.25982743848862677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.0138863c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-ripple":"0.21.0-canary.0138863c.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jNi//6OC8vh9ctCBHsSkz/qYbSnicDfLXOaCQh3w1OfU5zoLN60o872pbKGW9vfW5hf8Ftg2XkWdGME3WCbLdw==","shasum":"282cc0c239b93583282431b87bfea83eae39065f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNVCRA9TVsSAnZWagAAjIUP/iF60lp7NpeAetqocn3v\nn96K241EDegAZ3s2v9B3QgNU6AAsT4ceIT1Xb9tKvC0jB3nzUnX6eYcV4+PT\nQb0hymjrY5XTtQaFx1Wf8Re3yh2yusNn5QHSvSD2AwrtYodvszs2B+8DjF4S\nwkF2Kd6BWpOWcGjCsxsw9LH9L5QCWXcL03CFsVOWNLWJml2CZn7iIsbS1hpI\nvN1emqv3dopDSJo0yc7BeH2gan7sealXDoZvO++0c56u/W+wNwEPb1XyEaFs\n6klHc2O2iGHBWLRX/8syH1mhP5oJn/2fsnkulsYbfmc7GY3caKzv2waYn2P1\n7MBEyRwWUIZzt8UsSd1yUKmgvB+/GCIc/H/wWO8epfdvH1KMT4SpsBmw2406\n0uKShkqgBryTS31j5iR3aqAYEcN2Pa5uOckQ4hGsQv9QgAHr5Tv+yjKmJCV8\nvMhYtgiUYVk4Z02lgJPvHMy2TU7qb0QqS50NE5biDZ6v/l+vykpBEQfSpNY3\nogMQ6bFIR4ap24yw2a5GU8hcpPJig/pXXShkGh/re02tHrM4HJx63ychaaps\nspfyiRtbRqxzu5QjkK1uTOusMo7WfzQEMGyUoMPboWMwuNW9CM107qlfS57o\nVWR5NOWt961KCdXaReaR+FRPvGbBLIQBOa2CVmCz3nTy5zN/it4VMgDWTfWB\na1KY\r\n=GAU0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBWQ89irC00cypiY1TneDRAmYvvvgwdcMVp5xf/o2YpAiBKUYNWIPGIwk9UicGrQNmb/GObRzalN3NqH0g+McvQ8Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.0138863c.0_1615487829036_0.22345204471665925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.926f5bad.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-ripple":"0.21.0-canary.926f5bad.0","@material/switch":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-g2+S+MaM2RNxKuqSYq2O+jjvMzWpzm/pwkJjnrEjy3584elzlDboPj/VoJzMR3HvIhaYJHEd1Uci0EJBA5b/2A==","shasum":"03ad2ad64b975c2313822457d8d92306d1151b4f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSns2CRA9TVsSAnZWagAAt4AP/0ri2q2O7BYF5ayrrow4\ndNM4uwYug9v3E8GA/Cv8YP/f4tKKK6RzL1DEK3LmrdS2L2OU+azPtzRoK5N3\nKo1ZBT1Rl9ba/ge5Fmg9YOIunIFW9eoQnEwJVbXk3XBbDqGC3z+Pg2GaKfAp\nZEgfVToKoTjmCuKCKk9hhUV7QRssbYiKPRPHSoyCwN6AeT4wQAPhCSR4WFqh\n0oBjW63WIOlF4CDEpo9Rm+0WjvXWG2R1xpy0t80P+CAWFsqoMda7g8VOqxCs\n350bDWzcpcrRN9YmFxoTENI7wJ6cjT6s+NTbHnL2Dg2ZVeTbu4bGvlXDj4Sl\nKTGK+a+jTDTEJ5XvJd7zEYIB7/ejZMigJBcToUPCSiWNvsNRSU3cjrHHBiY+\nYI7OWcV5K7B4lPJ+AZEPOS7xQh6YxDhdyTEIeizcFhhRNt+UlSxJ/72NbRhJ\nwqfabibDOHbyd+jAFcVXGTY1mwwa2VIJomv72nbq91y706fx5xf4iY3QeBs8\nv9uyTHdP5UcpFw2SqIqrrCSJygk8v+q1asoL7/HDCdC9zXXNDTZSY5H36Bwq\nnGix2PEJp4BDltHp+myyaazmxG5KiKu0/eH7irMHMYuQX1HHjQSUDYDJtCXV\n/LODFct8OmSjStlXkRWlvcNdDLjH33f9yDdWN8c78UtwAE9g6ze1cqcNH2oV\n7MJv\r\n=1qrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGMdikuX542FISN0hExCRIAXsANxNhP0oIh1Kkinm2mQIgdtxLklHOlGfpMKKEyq1ZLgr+daWNVUx6T2pVBMr1H60="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.926f5bad.0_1615493941942_0.6761200426828855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.520290a9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-ripple":"0.21.0-canary.520290a9.0","@material/switch":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dYxDg89RsgA+DWvV2Hi+rOl1g//VkqBWbKM8EGZYNt7hPxJH4ZJSyI4kwIgUcPtanlhMyv4hJIF1mZn0AQvwiA==","shasum":"a967a7de0508694b43151fd5bef7f74013f4a6d3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmACRA9TVsSAnZWagAAZuYP+QBGx2kUJu9A7fc3fkDz\nHzba93cO+j2lIabJCch9+DkCM8FCzCPXtAV8Wzuun9BjwXgO/DGazPWQQTR/\ntzVp4VYWElK5e7rcSr7b6r5/gU0k1huRPOGP6Lqw0rKuRV8HdGJG8LYqexEa\n0FQIMGTzF8oLysAb0jAL4cG7TkAvuVqUO6mT2rM//GrZQJjIeLFqpBX3WE4A\nmMi31DIYj50v0SUmKgRUuOf6L+uGfXCnF3VzAVPZM9Q9muK1a+Krl1xqCwct\nQqdb+g10ppL+91q2p1qGhOPdrRbu5qx61wcnCY0Ib9WqFk+xZo8WYr762iab\nhnnvyCobTeQP3Qzkez7ZSod4AsvN5kpUY+9m5Tk2sB3zy3r21mFWWpHwSlHT\nv9OLbq7V7OuEDK4PJRIGy3BH8tVdUXny6wLI1AadDuuzLwoLmgk1nGQ2JDp1\nLd6RqOMV4vlCQc77W+M2N2//NYh4jDAPuFnJFtE9YkUcYDiNiuYnKIVokz+T\nXvENdlKwo7XZYGABVnTryvHrvS4Bh+mCYGbyYhiuHukTaajsY6rpQeeMf/1x\niC5EWl2VovTGLtgtOcPaxF17X6o8Tr6E67Umnb3aIho3tOnd9hHQb/XV4onr\neHOItVBttvPkgdBpdop2/WJOQHxYQauFKU2RvFKXowX5rzgRu2VjK3CUFx4H\neGWJ\r\n=pe8O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVr6So5KiSJkAhReIgEk2/AViV7On3cHkGaWAgXNGH4AiEAgCIEqiFKSa1FJlHFDIQiPubfQxzsy13Gk6lk0BzMZFY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.520290a9.0_1615501696166_0.359908509836546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.9ec431d1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-ripple":"0.21.0-canary.9ec431d1.0","@material/switch":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GVxfOnzsJ8WKEXWDS1hZMle460ePZD9Hrqf7XEGSB7/a/fqVNFYQbrsUILXwFfBX2+3zXw8ZEkdpDHHvdKc+aw==","shasum":"e759c22cf9bb814b6da8c34d1c00c8396c69741f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqJCRA9TVsSAnZWagAAIGYP/iwOFJsNnA2LEe/MTEJK\nFZhHanuxm180nuYoHEerhv7qIcvD1zsz8XWpEl+RQIrDcKNVoA/9IqCrn/SM\naVgRh3WJg08PLmEloNbWP6zhSf04iWEjmykJjJbknPo8ipqPVnY5tz7sqEZO\nRrb34zMvPuG5uh3c4BCHQurWtzcENImmR3fyOxkXFhQ7gdokc+KKqWWy8Pva\nx1nI4xzxaBwftaN297bt+PslJOQNi3bq0WsG4J6XRiehpp0lvSfv3FWnSFFU\nucBk0upQCgsfBfsIssl1oijRh8jfJt6QVD4UzTY5DgMKR6WjuQEGoM9c8dJY\nrYfANhsiv1vGMsVDWleyrez00RahbCh56jkvjUbSeehPOyTU1G8OB1K3XL7Y\n5qj5CpPy18AQDBexiTcqvVn/I4VQVLTn/w/8PIARWcxpOdwc5tjS2dLLp2JP\nE4gutjgyp6DGjae/EnOw9GAn7v250DyKAg5tg0NOlh+4svXrZbD+uJxBCw8i\nPw2suujP4MlDjYokLu9vtAkEMwrkatAHYs7eXHBOy9w4TeMNEB6w3NESN8/V\nNrNjppyXz9nTmtsHF7X4G+4bqYPShQLjgPOQtIiUclK80NTMepLUnX60O+Y5\nm+RSpaB5iP06VeoOmfI1tC+9FFwkKfug8JcwRfdlr4VEptfpEiTuGXar9rf6\nEBji\r\n=pmEf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEEzGx9IkPJ3YHHB4q5u5O67N9s3jH8IZsFwNH4lVH1gIgAPzkJKDXhM6NTp+9AvTg06KXQBj6fZAaS3JY7MHmHI4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.9ec431d1.0_1615501961544_0.6870811286494605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.4246c082.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-ripple":"0.21.0-canary.4246c082.0","@material/switch":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-eghBRIgfRTUDn/ux4p+u5L77xm5NfSoDJwQ6bjmufvnigkjX5obr3w3MqmHkJS9SASASJMgVPB208x/+TR08gA==","shasum":"69b94f98e1d1962f91011150e1341881615fd5fa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwqCRA9TVsSAnZWagAAd4QP/RJALs0I3gzakDZK2Fmw\nXlwVTORMEecYhcPbi/rSFMY/ItrE/dZNVL5nsOs5jrs0CLJ56QmVW2jGNdSz\n+9dGIClpzM4PtD+Xwn/88U3NoWVeyJsCAY6pSQfU8POcGGFkpuBxCjV5Z4Tr\nzSNyEmN2f0f/m9O+crwCjsAXZO5F2ZJEU1NbebR5oQM0fOU/M9MU+O9A5UrM\nZOlA33XQGthpyjqfsLbhFAM/KlonLHKS3FNzZpmmTW8PinAr6Zir7znpItjc\nNAXCAOIPtNXPONhBgQ/sup/q6zgJ5KU6wZ0FjP8a+l7F0KhRVzaQlCOk9C5x\nIbKbHIYdmdnsfI5M8UujIQC3jsa+TiYByKf4ZkaW7z8ZyCuIDxoqCrLyEe09\n7ChuL7JjuD11y46hRIdi2M1JFi6BRPZg/VMg75P+cEOUAyYIG703w0KJ0GNH\n6yAiReZIyLU5IZsIHH0FPFTh7AMFa6DpEZKFJRejFvddy3DHpmApTs0W2apX\nMJGiq2WFDvCv4e4/IFQdT1XCbchziD2BFDRRLS3JXDLGIxaLcT8SBwvqhVk8\n4G1vAl3NIK8ICc2gZ2mrcpsovhZHDIdOWTks7P+KVyzipyYFVtfScOrVGHOx\nLOIqMecURJr8UuFVJtSf5EHsimWBzurfXdLRZkBhyB7NXvIE6dbxSutTHMp9\n4Wvc\r\n=o91a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo/gy5ih8ivta3g5cjknujcNMCxs4ZPLYzbpxF8ck9dQIgMrYhF7mSvDnQXgHVn4thFSYjdcJxBkhRPGA1PXK4lQc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.4246c082.0_1615502378336_0.022183849855241355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.2d736253.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-ripple":"0.21.0-canary.2d736253.0","@material/switch":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MqZ8jfsMSHGz+zj6MtZy6/Ogzpv0x60rbLgCP2Qi/kiqIu/2IvtXVNn7UeHGWh9yy74Xi6MYlOZyBgE0lkWDLw==","shasum":"d41bd990fc7e6495cbdcbc7d7d325429fcce7b7c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FXCRA9TVsSAnZWagAA3M8P/2VhqjEYiE8o2Njf3jis\nHC1z19aWNOXf+q/1AKG5iM60VEYc+9/lA36YZg6LQ34jaM4gtoXKGs8CH2kH\nr6hPh+RNx2O7073820QW7n0ZLWidyeBgC1UfF1Vt4ZkyQkzdOmXKQ3oASV3D\nDp9Pt1g9pOvencqmh+AfPjfkhOkHIdANoWIJDKkcP31UrYF2R+nc35yIMx9m\nL/oOY7rvoQXkPWikCqo7zH4mp9tEy7PRUIGaZRTcrfOjtY1IDtWSlUMhFqgP\n3DdkcetSdWDB4PuuJF0PRXLcGwevxqD9jz7p+rFbs5Fbg7Ll2VMPzuUjnm6m\nHOCSSf9k1DlykDnivkfXNG8LAKwI9cGrTA+WCSDPcC9LL1uHZ9YfO3elmegT\n1eUKHMmNToc2R1MWMd78po6Awe0lsqdSLspR0ZZcbKR7QidCMZAPrjYHJfC6\ngCzvl1W/Ju1tJwO8zKerzogGzyLUUr+K7ROwlb9FJv4twm+XkE7GRbemgNyr\ng5QwaHHMFMFlp1rAA2EJyEYUCwUwZIjR+fR3oIzf6atzoTplmy2ds3ogxn7a\noou6rhH4nGIxRY1Wg6LOituqNZjTcaCIWHkNkqPjYHUsC6NYqAuAupiQnMv6\nM/azZJ4Vyvjmw7T7y0tWfn8we5kACssA1HYz3Tv9ICevSzKMB715mzxE/Ptl\nWB7o\r\n=ad4J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXhy/UPqIm86dRXK5xT6YQwyxn2+169e4YCH0SHa0a9AIhAORVV1vwQM5k+xx0iHPARsN5Vks/MUzez+SRhFD2DMJv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.2d736253.0_1615847766987_0.05202931576128744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.7033124d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-ripple":"0.21.0-canary.7033124d.0","@material/switch":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.73a227194.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ucbCXMy0y2KiA6vT9eYt2tDbGVHxxe9dv6RvWzqTTakK5j8tLZ38SvVs9NUITonGDTUHqj2i72a3tMc6M2EBng==","shasum":"d7b37fdf19dbe79955dc6d15a4158d96763e1c7c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPsDCRA9TVsSAnZWagAAxwYP/3NE90aqDe2QFveq9l0j\nR+lWV9YmIYtxa0LqYumTk0RJo+avt9n7zS56pk+0OfWMn/kOpDf0t4RZQYyF\n090z1QhqF1soXhy2D2FeOD3Uk7KVGtiObUJfI84jDkRmUyY5dje8Rb/Rz/iX\n2E1y90zI+NJHcmrGtXm5Jo3Fugtc2s5aUUcnduYt0sjhfXhRCrol/wisTK5S\nHqoNr1W9Zosdww7UidGPJRk77MdByLjnEaF640DH7bICkY4F8AL26qqfmHDv\n6GtSEKdrtm/gjtcvRuq0JUrLXrjVyRNFzSPE8dY6OcA7zsBk9yrzFzIPvWmS\nHsWBx+ewj1ijEhVjcsBBCNXDTkn8O/GdUnDyngKQT27Dscy+jkKMWwDcZcW+\ngEGkheupjgeAKeq39ecp/XSEsnwqCM17km3jz4FcAzJBovZbS4etkupMkOzm\n6q9vhbnHYN4XAyh9ht7fKh8uDz/U6e2JgpAMSyGgXAtDMWknVv0AfvIrpZR7\ndwxe28R2/4h7xaFiJiS74m9Cm7izbbZIRlxzHLDJxI4wwPUCF51Jvk6ydvyR\nBxXx4WRlikwzd2ipK59Odqse8Pqjorc1TUtRap4zkmSqDRArCJ2Ff7OV1Kg0\nb4cNEUe4D8FDz8RyUnqw3sexjorfumYj8R6gE42hYKtEAIt4FPlFZoFpvmNC\n+Sdj\r\n=UpAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSijEToel4MgMQws1QuscYaRcceRQjANXEvGKhfsV86gIgM917DdVKapLqqOvhuohR42itqIE7ZoqQJU2iwJvKB1U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.7033124d.0_1615919875078_0.01802759673368226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.6c0ee901.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-ripple":"0.21.0-canary.6c0ee901.0","@material/switch":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.73a227194.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-03oaMtPp3uxb9A+uWncynIFzouK7Y7O0O6/j14OgLrxL9a5jLzY9S8jVuq0FxuZMoV8C+/SvSLKxzBtGbZ45Vg==","shasum":"6f47f35dd145e23344c2e6cdefd82fee2d1ce8fa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOYCRA9TVsSAnZWagAAUrMQAJA52XdzE3CKO/TG8Vbo\nJBDvjeKjtsVVqoNQ0jFyd6/bMTxiIIy9v2NXf99SY7wUAHA4GqfPtOcnXO+m\nWKjFoImZR0NxgH+as+d4ZGgSgDGBt2Rt4jusnXRejS3de5gwpyGAmIvKdCjl\nTaW6jGc746uneT0vkIASjuOPTZ4PJdJCVoR/reXgPEaemJ1ipbtV5/9OFjEj\n1xYE+AcPQCnutpeND6qBPB6HtEJETGrS9wEPx8rSH5tjdzpmZAlMgiHnXJ1W\n+l1hRTCLCszwjU4OMkWjsBZvZi3sZprWTiYsy6Isn8dZgVO/7s4i5vvsNvdt\nyNwyKrC5s0anohLrq1cbwfwiaId0ZQMiBCTmKFdgIg7plhV+PhbQigr9Nioe\nWE8IMB6cHBLi8th6LN6x3jLd/mrOEzexNZac7hLaT4YhnCXlw/jxy373FcsJ\nfA8VT8wp4zfYzGoRzmnqEw5EnfPsy+8BlmVDbbl+1kjxMbRSaxhst3vGPsb9\nQKNPmdj2Ubi1CaiYajcFzEKHitG1VG4wNKSR6cpthiGq/38jYB9gCn0SNIoX\nfjuodbKU/H0kOsmf/TEWEtX8Xw1kyh0KiWOD6E5PethWWTbLu9UNpEjphbK0\nOQiDF/T63BDkWHJhwA8YpRQy44PRkPUWfv63WRFEV5wUkHo8/gUCE21iqbmJ\nKtCX\r\n=wAf9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEcNhAxkPQFG//jwtSuzWmgShKuke6AJfFGbVi+lUnfQIhAPKL3FqgzGrFK5wCxHOAw3MArG/qha8Ox8v3J/RrG8Ut"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.6c0ee901.0_1615934360061_0.0768876780306611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.7f0d605e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-ripple":"0.21.0-canary.7f0d605e.0","@material/switch":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-klhvZX2TkTJFEkT0u02XJOHmKClYvZquSSRxpABtGrOsNyQnAfUvMfhnOrdhp4gsU+2AWsbFiRpYf/aqb9DkfQ==","shasum":"47e46322789a6bfbc7cdf1a4b9d7e8350209e10e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":43159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTPCRA9TVsSAnZWagAAdboP/ip0IYbZ9yfCkgFZM3CY\nVEIFAmlJx8GQkXrSzLbxvVgLxh+7JRExHJ5uL5qNKm1UUgjZM6o85d4SIB78\nb5QOvQvOjbxrfwe4NG/afLuOXnk9elcDHCvV28qjmFoP74RrBV+WQuf3K4zi\nVSYWG3EcnfE4tfXNXru+5QCfm6WoW1z+oTRfzO4W+wZOfP6pC2nXfzpXAcQQ\nlovNNlOHk4+WQ+3aKn2H4xZYWavWOaDGHqUgBBYt9f2m7D8yketecFVe6QT1\nhjEqaR7RqSFoc4ag0Eyed6nWD6bnuVRlfPt6hUYfevjIVQss+Z2EJMrKSf8f\n7FnGJ1WRzc4VzmAzBYQnoNd8jDKoQdegpkcBpf+x3VGJd9WO6gqe/KE/qwB3\n/MGeTts1HH3UnLxIz7tv6g9Pppms3snVxOwDktpVcEQW5BdM/0LCbaHNiqgA\nZb+iZJ5f9uP1UDJKXgqkpp6mK154eiXtTJiH1fmV2sHBIPHYBXw6D30J79ot\ncD31SZrUH2TtZKw8BsIWZ1qivdxB3A17UmgrLnpyHmSQ537OcqIt8w/clIJp\nxMAfXkQ+P0M36ZA5i+hB2pbM98QN4gG8mBWOSWwtGmXzms1k0WYyCXq9gAsB\ntkyzUSwAiImeWxC1PwFWdxjF8MoQal6UvIFc6KjbjMgWFxHSnoACXqHRIpBU\nXWDx\r\n=Yj4f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyIQLzuePh41LQwnGHa3+ztezo3OW2sOTiYrrfrsBdbAIgBMput6Frg5aVs3jr+E2t/ntn4AT1f6Ba7IN4dEJLtNM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.7f0d605e.0_1616004302705_0.9032201899403529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.572107b5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-ripple":"0.21.0-canary.572107b5.0","@material/switch":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-y9qJGA5rgsLSqQlIHVWo7ulUg9oB0rxjrHhC4C3iXXjTNiT8u7CuW2xvwrc8PWNTRosusJoqUpY3YSAA+lrDzw==","shasum":"27e2868dff954f0c93ae9a380e487fa40e52b040","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+g8CRA9TVsSAnZWagAA4sEQAIG7/FgkEc1/gQ3lqDjz\ne86hdFHO7tRE7uHshVyIwUwOD5wAL1qR/kzdczIr2QvgjlHJ4jKip8cOFmzk\nskN8szySNl08XbRoZEGcfC+zzHlEH+ucf+gIDX00ei7bkZp4ty5Jdur3c24a\njc5sXbapH4d8Ewh59hZzMs4iv0kcN+l2JN5Jd0D4cfJjkgujXBiQ28AtcIuQ\nH5NEQwqGEsLF92snEpb3VnJ7AN4Sc8FRcH4vpEwxOpnUZ2Zy8Ci2MWlXWltM\nkJvUVc4iZrgeJ1B5iKcKSSQZ38BB4b0hbj3ji/XEZtNJ8hyWwcY2CthX9pCX\n2V7DxL07Khnr4DHL6XE/7LQjJh9LW5FNjSNjdFuSWJQ48OwF+I//Zlt0kaBk\nlfhSeHjKgasP7VoQHYGaDroUwv/3iojc1snRZjur+qO9WWJxy/kjEy6c35cP\n3MAStjE4W3Z/r7WafXFQkyuiepB/rAO3ODSdjQya50DNe0wj97hrUCeHTq6i\nMITT0b9fuQEdlLU6UXydJUc443UbHLJD2wNs/+GH6ran4ji6OHRX7GthRzUc\ntq7Se8Qdc4ea9xqkY88Mt0QoMUt1qN5RpQxjTmZ+nBd0uD49g991k1fJUSd/\nFQvhdCHUuUvorUVDZF+tBiB+4UyWbFSCvzv+WJ2GBM0dVMV9A8CN3mu/FAhq\nzT/W\r\n=NfHI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIWFXyfQcQjAd2t/RWmulPeTy1GW4tE0DTfkr8y/cmkQIhAJ1nl/fB+6P1yaTbwrNHLcCyx+GfdzSS/QauuLjBDiO9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.572107b5.0_1616111675754_0.9551582804717482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b7b220b1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-ripple":"0.21.0-canary.b7b220b1.0","@material/switch":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LiOkmyKlG69KyrWN3/m+qCSJ1MI4+3pQKKOaYYoQNmChPhel42ErxlkB/fhv7cBch0Nv2MpMaPTntV/PKJtywg==","shasum":"ae430efd4d0a86f4594c6bcb0dd1638220b436d2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5FCRA9TVsSAnZWagAAqrsP/1doTbDAKUI15JzVS2S4\nq9O7/AJbjfo+mSORONm/RhIPH2D8V9fQF5EnvBsTkeF88Xl7J5vhOna2w1JA\nMBODvokDmx96XFEPFbrA5sgrUvQ12ehX/2jrhX/aRqNSGkg8Vzp+JfaE6HiZ\n+2jqxPA5oc0It1imo1VD9uAwHLCtA9mR+Q26dkebnX1NmxqTHuEd3pebXH0I\n1D3VFVHk3Kp015nryKrQ8WZ9A5UKehJYl4BuwJAjToEWpxK2RMBk4ikmvBOK\nrUJ8w1tGPXqoL4pWJz6dNK1IUczluXDNNbJWir+86CfjjG7rkjpMNkp+5M8N\nhIEwS0FffX9YNd/I35jI6y0klVdN5cP4n9hAFqqSS+i1XTMkEUTQRpX8LV+Z\nhA/3yhgEqSog6DttVhLrVsYzNk9ZvLhs+9xoAM5BbKrF9eDbQJ5SOfHKV0Pj\n8g/SMLYJUn284PW5YCDY35cDWdjG24cAD1IBbckxnd22ihpFANn6aLf8MQrg\ny7OL8Wc9xqNHQH19DHYTOE+qyIR8GSj83upJ20OZaSZGMpu1AL7mvuJUSkbT\nINdxP8WoPMpLkkKsrDqdfVCLCZWM69E9G4njV52aHZnZ45it6BzqGRPMbeSc\nPAVuTmXtOpg14g9UU3B1SUcR9GtnIvp/ioNyaCWqt3JW63jrlWIbPoml1X9G\nf9m2\r\n=WtB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCODKGVUIQK8mY9xh4vCD7jV1QQlz15XGLPe1S1EaVLKQIhAMMCyXOBsFf5a5hSlN03fJoPhxdP6Yavp9/uIHkDyPsG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b7b220b1.0_1616113221507_0.2133917717967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.233b2de7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-ripple":"0.21.0-canary.233b2de7.0","@material/switch":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SrCw6sijzTmhuHrFGKtAQ9FnzqgQg+mpP3YWtj0OQqEvqD5C3rza/2V5LFDJLjahge4WLmqqo25CKyzfs2lh+A==","shasum":"f7cbe3c448eccaa70e5bc1160061ab0e1b636f88","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2zCRA9TVsSAnZWagAAkfIQAJkJvzvMc0XoZoQtckBM\n6S03xs2rSGfBvF3ElHfGgkjPlE7OJZg64Kr7/MXaK2vqVhi2iQAUaqb+aAVV\n4H9llo3QQNmRPMty0e3iJcmua1QEzfHQyik0ILO6d3aRldCtMhWYBT+NZeG1\nwgWqCBuEbPQx5ytrYkGuSbuOeLdIgh92NU+owwf4K/XkO1XsvbjfFoLAsnvq\nv2x/qgj+XF1unNLdb0qCMfisbiee1JbSbLD/dqjrs+SkEfjygeMWwhzACtbR\ngkaKi7GDdOUcAxZLV9u7If45cToauGBAtEIH9FHEyARqnA9Uj3oqJOADlqPp\nLSt3YtujwpTGz+Yv+wsCE+HSsODd5/e5K6IydHmF+BBVjLptiNiHJRITTmYT\nPTANJDwFA8pr+5ZqrL1/nAoTZzE1wenTrboKApVmeIvL0wRDLU9AHL7ZxSQB\n8IWUxXhUr7fOlml0w4EyCj1lDL1XAK+PrnyNLtipxYjCSWSSloEFYPa07NFZ\ngMgQ0n4PcOrANjGiLU9jaGOjVwLL7P+dxaoqOes6c9qxekswliR1XymGSNXG\nr5xOoeVc0aDCI2MSYcPyV778fYL03Ekms2Ioc8mQTNV17L30NjLeEgugQpxH\ndm0Gi9GPR5wtxG8YprHXzxQAXiyfAiBbZ3L5EOqJR23NNGRKnPlEOHtbFrCE\n0n47\r\n=D9i9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfuMGH6li1gSYLpvTK+mmpgiOfb5yws0wdC901+/OL6gIgBEd0oScDyie1yEZNN4VydAd0jlSBP8ZzLfX8p4hRkrg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.233b2de7.0_1616178611161_0.7505880736085708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-ripple":"0.21.0-canary.0c1a2d97.0","@material/switch":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OKJ16tqLK4iFSBRNc2npDXiiMykJPJjJh5/FvvdqbZo2rOVaqgIgLdvwTROm+meE++5tFzpH/NJZWognhXDqbw==","shasum":"5896f0a36cfe088370aac729f1b4bdacc268da53","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXgCRA9TVsSAnZWagAAfoAQAIJbTo+chy0i1DC9+4rS\nnKSytJMAXWGsx8YLhEbqDnQIdnmY4AW0sTIPgBh7N8AxqXuWsFa0ZjJ4nRc/\n3DmJHfbdpjW8NAfynYQhUkYfm3T7P9DS+hDRQV2lc1aqgrCwi1KQNpzqJP4U\nRf6xrf93AeQXrMixPaNoFLC2BcEGBe19wOVvv3N0PeveTI8aDSL8UVK9Htzw\ncPIm9bZUtx6fUw0pxVXQQTE3rkTdLJ4qV+VODS97vWKzd7Y7PujGG/AsE+1E\nkeILq79KDVDlpAgwqG+GHlu1TBIi/34KfXu/HCNB+dSMnp94CFIRYifWMUdg\nZipduU3yCFbkqFbze+bNLKvSmLzse2snxuutqleTsS50J/HRSgJvrCZ6KVr1\neczYTVyiv09Up/ULsEAxm6eVEjKw3pbA33rRru4uiKPqz85d7zVcetcX+QJZ\n4qYERnhKf+QJfwl6N4/L3MFyufjXqfbrKmkb5ZOkpYEOPwpFibz6zkUC7xgh\nd2N2XrOTf39oTZwcVsCWNZ8oZpoN12QXcyhue9ZcHtgEHXSSfNJZsOzMn8Xw\nBKdX3/1fvtuYdyFFKUpu1ZVfSC6/Y4Nh4HgepPQvNhpCRpMz8F2VxCSJBcY9\nsnR4Zsn/Meq9ruGo0KySZDdHyRnFFS/xPpJ7e/PJ1BRAkX1MTdzUZ4/abZUg\nZ9AT\r\n=wThN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMPqBn5xlM1XyG0H2jNhQNxH5CsYhzsjzJkA7VqpKS2QIhANxv71fAfeU4necg0F5dcsUdnpp5z36lqWaEK9RcUjUA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.0c1a2d97.0_1616188896265_0.7030890624158213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.57ca2e73.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-ripple":"0.21.0-canary.57ca2e73.0","@material/switch":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.5f0fc444a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HzSDTeRs6fcp5Zbhk7DGntkq2raPSuk9nbAWPAQ4pW+IwWck9bZoidLXdiQ0GZQwmoWIAOsf076LWiwbWHDsbA==","shasum":"9bac1e29d8f7e58c59f359f947f3c9f73f051ed9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSiHCRA9TVsSAnZWagAA9fcP/2MNXvwo5F7+O2IU3vLk\nlHnsX8dcPFekiPsmQQFQnWIAydCU+pWm/vBrYoSEa6GLtavVNn/bjHiWFvrK\n3vqpVmU9M5DtGnIH+LxuF6mXk0UcUFao9/MiWwF2pKU8WUcAnmLnchTaUHd0\nrrQpDuAAbanYqigr6/tFD/k8rJYRzVg0F1utR9qt0eK6gTkeBPRLs6Wqu+Sl\n5ivIsxeQTgBM9pcZib4mLMmZHSAu1nPqYJHk+FspB3nCevXoxCJuos+LJuy9\nIEqiZcFE7/P1iEB6pupsZ5xQdw7OHcbH4aal59os283JAlvfv9kIv4V/Cz2R\nAVWEftpmBoCcoW/oWrkYiq0pbmKAP4xICBFtAdu2Y3sN7lCcbGEcrU9f2m0f\nKk1vtBQnrFhCGY89dzSErslkDqdDPExj+3bWZyOVFfpdbeTUbKlEe+cjIFHK\nCt5KELqCK5Zyo0F6LqIjsUVtFcfDOV2gxCRevYgCDBjO6bOaK2AE5Qmz+/na\nh5zTVT/Y0dkRcWdwLOJeevOaarKQAnL686NHlRvnXARnjp+5TcjqdOsZoMrV\nn9sJnxrSmN6ZRyUdwRGkWZoVifWJhbhyuqFvmY7Rw1BoJejGXwc2YyeiQW+i\nk9WFQio5tVdj94Q11JuMGPLG/jKnzEmwl+Hi5yftf0cbn7c6fljHVlBPUuGb\nPZ2w\r\n=FfPN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjH7r9HO1IoFlEZERUsir9EfWEAi92WF8VeJrdiKwZ5AIgIsKG/X2/eJ/0cDSoreojfkoYD+BD9hGlLt7Q43yigR4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.57ca2e73.0_1616193670597_0.8778581431342214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.5c058f4b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-ripple":"0.21.0-canary.5c058f4b.0","@material/switch":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.8943b991f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MKjQ9k/4f7NpCCfAL28S6aVJJvxwPu+Eluqq/amkf7FWK4nRKLOBmj7L3DbQXKPrvcqQMlidgGKbMe5FUTxEOA==","shasum":"4cfc733c9d97a197b173e37405ffe39c0acbf84c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnT/CRA9TVsSAnZWagAALLAP/RzRr9yAVajQqurUurYq\npOUgyClKJo0PK2ZB1A74kNRET+PMppoXfIn7lKJobQ97FoKumYjCBLPCLUEK\nae3CLYShbNKTodpvjv7pEhLCcZuPBvgJM7QFLEoGVhwP25Rt1l9X98/zYFEI\nGr+PUXdoZseJ5uIa6c7hQv1Ges/S3YDZrZjm975YQw2r2G82pFeSETkuuXr2\ng3l1nfe0WOwjUJL/E0XbYhAeFy9DjVGwxdWKpNA/vEBaSolQ2v1dXIQl3BCw\n9ueEEzHTVNI9Jvq4MicqFsVVtjHL6wmRLs7dq0HePS+qG76ccG8zOXNdh39q\n7U/36CTLemPgJxthpaGpHyZyP6vD1S8Dz8rGIJfp7YB9oPySSgWuasbuQabI\nJSCg5k7AoSm8PnMonl9igmHrOmLOJXmRKwCkn7S0THRQ+lNzdoHHmj+f7Hsd\nMUVY9fkXOciAvMcuE8RQpQGVBeVSdhpyA3c2Rw/MEfc6QUVYrunr0ZTpMbGV\nmnItQwgj3aMJnytBH+rtcl1vKkbiZ5dHerZahlCVqzxb5cg/ve3CeVjxn/m3\nlsHU2bHUHH+wqiYUJhgGefwG5PoxQMUq/UsEy9XZdwZXPJrLOISV71JxhjFi\n33NmQCgbdy+Y2EIiwTZl1VgGI8jOcgeAWsmjh6Y8WML/ifDnn1CyBnXxCpUS\n7BGA\r\n=F6lp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI6FtFkmBCularturFrm+2RdJ9VavP8cN6/aJtTqRvAAIgXcVE4RVkklErzioVu9Gn5Using5rRUol+0SniuKYAfo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.5c058f4b.0_1616540926953_0.3976222418323201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-ripple":"0.21.0-canary.e27ef7cd.0","@material/switch":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FQV3GXGnfXGwkE9HljucWFChh13eoBnUEWaSIHP3b0SsfPSSTVk/DJZ2pihhAj2eAy5D1DYDj7yvI30E+I4Dxg==","shasum":"0998b7e65a5d56d727327fb0366a0494f689e2bd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4X7CRA9TVsSAnZWagAA8f8P+gJIiB64Apw0drSgvv4y\nHy2qw+qlGFilxldTLM20safY7HfeKLNE5Wgy5nU0qVHQ98lbvUwwonavc9fb\nkyv++Ul64EX542hgPzGb+uRX4fRg8vITVIrUsk6dZzwbroUJcE7KOmc/j5WD\npUYtpZX5HFA2L/ASkTJExLvWa+PWHuybyRNY4gJ1g/tqvrzcJ5+z88vALLJ9\nSKqc55gxzjQSCZQCevKXeFNBeyCbWRf0brICLDjdbSp/bdIEILxvyt0YGIO1\nBcu5s+9ZJBPneuCQxv5mBUEdIvRPQD77RnuArGJzwKLlhqO4+u6LDo/bEgfw\n0ZPEr8kIkroFoGlNAItvPjtBIc/0XTd9V7XmyNxNEB7FrT+f+PFrwOrIYKoO\nwt9YZr5+B3trw1mSH0HpR1b9dctYh0zGLJsurNXd0Tq1AQeWBVrfCPs9u4h8\nCvbIbtZbkY8nSAzxixDwBHvg7Vm9XwsrK2R7Bcsa93vzLzWoE1GUuJuBoqhW\nkC1UZPg+39QTNaPvumoOKRrrn0OLpq7T1968y8Unl+yD485wNOAKVaWsWMNa\nL3k+3b0HbFW1G1JFWuSlUddtog9dgA7NxCLPJbDtefRKdEMv2MSENfnYbxBj\n+F3kMZJFdD35eE8rvaWc7hZrCHCMN96qixlLUePLckXBqBHfNPq2A/tZDdsq\nh+7x\r\n=qN3J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdFZesmvQowMevWFEMmMyT9nB293KPoxakpyUGzCjn3AiBg2lfGA7hDBVx5ipPtr6Fr9It6wP3txf7MPWY8Z+xjbA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.e27ef7cd.0_1617135098888_0.2991117961148877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.15c09e74.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-ripple":"0.21.0-canary.15c09e74.0","@material/switch":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-N+N+j8p9UOVgedv6HPkhKMysv4qsVMb0YGvnGu8OT3EEpvpXJyJSIN6eFxbk4cY8RiGi3UNNDZUkvbLV/9RIYA==","shasum":"3b77798cf02004a85ad6bd4f8f613d3635bc6330","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKe/CRA9TVsSAnZWagAAkRIP/jNHSNXhAzxaGGnItVyT\ntSdKBY8tO3D3CM+63rGk1kOYv8PTetEHcOXGfmmFiqaDq44dc4cU9kj6nb0R\notW+mCir5Hp9SBMDVg2ofkptnKRIS8pX2XembM2WojVkl+QrdnIPsHpqULB2\n4WoiasCg34NsEuG51Za9Sgrfqy3xgMiO5zi321FNgYzGpy1JnIffKAHQ+FaN\nQRGBGM/hUKOexqoeH8intkALpzNp4ysz6OATVhiKgp20+5mm0uVlo3F88Jv/\nDw7+WZphxgIpgtpcYwDxLrWmRdrgfPjLoeA//73fkMTqyIJiBxifHOvs5CDc\nQqKqvrSXu1mueEVN3HNLgulboYOqSvpOYoCdJLuSyZpITl4CzIhscVs6C/SC\nuMXx0c0oNSfu4wQNY7eU/DolIGb9++AlCuOdsSRCEHTJEOGWL/RfcokTa0YE\niTbwohgUOG2sRCHXIXD31MyAS43mvqfmuCqcAgOQNp0k7zANvkQ68S7+Rvy/\nvr7PZZa+bNXlG2aOa8oKWQ0eZU9RODwHLPV4+7dLwlsc7jpfjK8K3N5CYMYs\npr4ypEcMup6YRARkKvWxd3iuDax1dacS1pA4f53UDjeOjbNYlnAaTFEij+as\n2c3n4UJdJUqUh/XT0GQiZM/i6UI1k0soPoknq3wMhfsLKNXvhP7pUwUFhjtV\nPBOG\r\n=Tg5n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHP8QFP9eNtEO+ptExH/bw1BEm9Oq82Y4og+uQy1a/6hAiA1Bp0kG4ZCxafFE2uF1dinMcdGNzFeXsU6xLor/0pi9Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.15c09e74.0_1617209278979_0.899897846170089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.4dc32be3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-ripple":"0.21.0-canary.4dc32be3.0","@material/switch":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oWE3jdqO4D8sHPFD1Mt+l7XoWpuX1m9iIcRUDcMubIJyD1kH60JwEBvlHoQhCmpQKvWJ+g9GeK8RnEssfgnDcw==","shasum":"068d856fddcda79d03fadee7cd741eb5361ec3fa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpRCRA9TVsSAnZWagAAivMP/3eqyLh/qNNr2q+mgElP\nCX6LhtwVZyMuYKMLAHTwikwhqBBwQxG9ZU3//KqM5Q+x30nySggh3WDWCuW3\nd6u1bI/f9vAhtLEOX2sHaIg3tIw8m7Gffc55LTE3wpocMUGgHeglof08eapO\nyMzcHQqtWPapmYWtCNNj7TLY2Ev68p4pHCQJcO8iKg9y4WtlKrLUn8EOxmFH\n555H6jnOf4Fg4tlG2eDJx9CObOq0Y/XglYQToL+a59E0AsbcWoIakvJqQdKF\no8wXagFO5DnWIt+owyfrV3VU01jLqrlY8FWhN3lSj6PLWea7DVedaf03AC04\nBr0ezIyPEVwCwftUdxItfuSfJLI8fYshOW505dH5t9CVJ8lgO7ObyYZ9Zyl5\nznJW1NibOufk5iL6Vy2quloIKt5tCXu4AHu/fQ/FRDNMF67lpOtUTY6VnGcJ\nlKeft9n2ePPOHOPdziE9qi81LkX4CzYDLYySlpw+ZLbOd/5vxUnXqginjO7X\niOR4Wkm8hn/wFZmVsP5nD3aVsocSL7Ut2x1aJ6aw9BPaNh+9/JGVX9HVwaRH\n5bwrVJiK8id+ihRj9bHaa7F0eon1Xw/p9tq3tEKGWiQuAIliGJybvniAx73B\nwGearE3gQW47YfbChivmstEmzbIlXQo8lEpdLQeJkgYi8asRYFPRBtPkjc6j\nqIDv\r\n=8ay3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTxqO4jLKw0Ou5Qd0yOfy+Odci2ILTBDSlz+tF9yJPWAiAiUrnhd+heT9RQN8Ewgpwlz/+WfD3psAg6eEhHUJgoLA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.4dc32be3.0_1617234512553_0.06688599188043853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.4b717f65.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-ripple":"0.21.0-canary.4b717f65.0","@material/switch":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yp0AO/SfWXTsQMYfg9QndK0KVv5FiId9JkZx6Ngp2cRTj41wW/EgR8Xu8eMUNbjC/t6fJzuUJY2xEWCEE5V+NQ==","shasum":"b0902601d6faccb3143fb45de967f656d71759c9","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2ZCRA9TVsSAnZWagAActQQAJSeh7rMtbd+y8PqUetV\n4lGQ6fT1e/VOMVIho8cTQsd/f697KG/+4vW9H8BYiVFcGoAbFO3K8a+QbeaW\nWgb92eWhaveglHK2TS81JVSBFQv65uFWzQFQslM09U/UdDWHxqExFnLupJpF\n8VTwuMzqa32xc2qYidbgwhBkL3r0waP7Z1+rlneU32rV1xVVa/JXLX14K11X\ntF3lSqu1qdW0Eg2oC3scXooqT1EayduWCIpbdgfp/HFgQnzAVOtwW+xzjbUg\n8q3MQq9RyHu60eyUIiOXVbevoQ9YmUeZrTc9m0iRVSjVrv1LXZrmkzkfihCY\nwO1QOLXB4P3tKGSo9owMlS0sp8GywuQX+2stLzlLrtEJd8PGikPvKKt3J2V8\nqJiLCf/BcDBQrF+HHi32+ber1BEcsJyc6MOS0vZtE/6c14fIbeT39xIm3f6y\nXv0uxmIjioIq6gUtrmld0BBMM1xSwRqO6F/yYvI5dwck/fRUBA4s5UjVYIc3\n9F/h/I4T/61quAc36a7HKzpzEg/TUrBcocNjaz1qM0QRhUzbDHOLWy6g1CUb\nsyYTnjCmpMmtLP0T9viQLASmvJedfZAzi40T6+OwTmjmNd2gtKcV0MYawLFp\n4x49RbsMi4QcsQmXAYcZXpzbD5bOX3oMTzc9dmEVJIQQi8dnomzql9SRdv6N\nv/MX\r\n=ZS7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICki6xI6uTYNeGl7q6AOKLgyppG8bxIlGnoIH3N06YAYAiBQyrGiuaw1skUl0ClUoxsDpmfJLOGLrCRa+phxgEYWiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.4b717f65.0_1617300888782_0.7500815305050206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.c6870f20.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-ripple":"0.21.0-canary.c6870f20.0","@material/switch":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EERMsS57nqlF61mXodr9BWEtJ1Ae2c5vlWzg1ypty0QGnpk1tc5DjUj4L29JrB1bBLurfcZfJKPd56zk+7Kq4Q==","shasum":"84ab3f97cda8d2d983907ad3704da02e95c617c6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpiCRA9TVsSAnZWagAACqUQAKGG9SKPKwPW4rgpJQAs\n7zqyEpdx6McJO7KeBf7iuI5gJYOnDbMy2VTPncCOjgFRXVlh5+GtlksTOAGh\nzISc7mEWB88cfUbtUWbLd62bTsqp27gNxvgdPTfJ2jNH4aTssy+HEBbK2LDa\ny8TwRP+LSZ30fHSLVgRQ4HoU8KGTqqKtvm4JMvdQkodZY4ebTXTp17/MG7LS\nWvrIdkugTkpAAyDy3s/obU7gg3iEuMzW5u409iwRYHmVbvVWpZ/u2P2bgvQ+\nIl5xYuxYUlpO9dheVASJwjZfLdcbnB3HPTDxOizSzK2PbZKV82KgME5aTCPx\n3GqXVPaZEiSpPQcLkjruw0WUw/D+bb4FtdrMHDbTSjiPO/VU+hNU1JU03LVy\nZEa07ETy0Uj982y8rdZ/6XkybZEBcEG4XX0WCpMGHuOejXnFTLGjoCy9iwhT\nuXyoRmBJdqEEvf9PzukmUSyNEjQKYaf3Dhe6Yujs3gbapMQ1sx3Txbkq+dZU\nDdv+0SJX9fN1RX2F20ADF3YD19pg0v1jvscfWQnGJ6ErCV5J1zfv+lrjfEW/\nTpBTSIrFLTWTmWwas3TpY0DGeOe/wL17IGuN6rvaS1H13tvbER4NbbalVEwE\n4F1YWsaEK1mRopS53N1y/2fD3oKrY66Zw5yEP/u+qnA2quXGMpDxQsU9w3NE\ngb9F\r\n=rzBp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfZyBI+EsO4WPx5IHUO9MqQmMoMn7mOdje0Uak/tI0HAiBLgU+Jzi1kKggFY5JAE55YWpD1gQ9UYY70OF9H2jeJMg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.c6870f20.0_1617320545630_0.03436458591164682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.852f873c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-ripple":"0.21.0-canary.852f873c.0","@material/switch":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ndpsQS0dB289BdyqttL4XXaaH75x3cewFX10FRx55c0Ehd96HfX6L5ZFq6sJU32I/Kux4l8oD7Fm66JLytw75g==","shasum":"1fea0fad26cca417e4585b4b60f3fe83eed4092e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqoTCRA9TVsSAnZWagAA9skP/i6ovy2FLMHq8VDIeOgC\nYk0vNz2Qt/VMfQ+E1Nclg2tl1k7LIEs9ZJvTdEoSFIKFe+9hXJAz75rfrWFx\nSFMdwsp1IoDS/bE2aVPAb3QgHCq/rZku144Ui2BuI6CvbjlbkEiObi8Dc8WV\nYfMmp8Nnb0Mpez9KVV3zr4kTf7zFVpRPoknH+5MT9U+8XuIhRFFRGoZNoenx\nfaQ9hQV+XbCC13QRbd9PHhs1/nzYBggEYCf9xo9MQVzwMYZIW9LC3n57zccj\nOVVRsz+BC3xPG6/91Z7GHVVBv4w5xjGfc3DwFmafYO3j/TiAb6ZKNSVM6Ixx\n6K9G1QtwLGYmrzMWDXTWbDF5dD8V6dIy9X5F12UVHlSfRoLTyxUlikZ4BJaL\ngBEu3AfYx+T0MDVo5anaJlLGPmTeQwq0K/fFcJOCkIVRNJVYdID5PKxB7J1c\n9I6FZS9EfiQ/GKUMxoQuUReP4lZtciIbYvK90wcVnW2gXiTGVAxV7HRwIPGq\nIJ7oJu5qO+3U+F+ADYVz7t+ZmrdalIa/kDNo9du6VHQIX+5vr1/MBtEOirVM\nuA/w+wlwZfMFj9IYuS8+TVPHMxub119+Nz9uZraZ/Iz48egQqzMbqiO8iYMt\n4mjT4xGF/fcB1vm6jJqyXqbYEFZEdRNg9IvBJMBUbp5USGWlJjtYil3Ap5rT\n0pl1\r\n=rb7d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8f5hIn7dkExWIIu8IoHgdZxack9wpM7ZbopfzY6iD5AiAaWtejy6ygIbvxJ0bTdWVpCF9lqua3mxfyMOFEB20jIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.852f873c.0_1617340947317_0.8894153347403915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.4a674a1d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-ripple":"0.21.0-canary.4a674a1d.0","@material/switch":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n9jReSPPeGMqi41dBzuIpy6pg3mhnq3tE5Ckrx4AecBx0LRswWrs7URgjcp/dg3PtybVYqrqHk6IWV0DakCDRQ==","shasum":"2dbd88e07b4a85daf53d0e753ce74cc7892c5b78","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":44845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3WCRA9TVsSAnZWagAAj5kP/RXLOgn2/dIRVRWqJINr\n++IMaq9YV48bscQa2qoHHvlEBqyAg7L0ThGZL83m6s0E6/icvZBqJjdnJ6vS\nEbzuP4LAobotVNdmN96MDQZ6wGeVOCISn4wP9gYnDVdV/grcrNXIw4Ea2P9G\nPdbc9geano7nVrJ8rmua49iSv0MMx6V7LuxRmNSnFsiHq5MKUIoHKzhGTXof\nhro0mT3046d3L1rNAvfZ7Svi0t5JqmkMirDAkFohVQkeIboFDxTGKmw7qisf\nNIv511Esn703J1iILYDTIRR7ApNuqrMgf4BhLsXmn7w1e+4jPYPB2df8ItRe\n7yCI0ODu56fj63b9nyC9w5jhSIqlYdSadoJAqaKFqUkcl5orhVDVTI7wDUkU\npD1wBwiMnoDzwEuOSAr9f/l8l3558RrRiTT1RaC6PFJ4IDnQnhjZQOhchIvC\nW9QkyweTuKvRCdIGefCTyF1hjzrf5yf6ztk9F8LsEGwq2KBEs0/7Eqc97Aeh\nA6uKl8KYy8h+iUGmogRybN9X7S77hMZIOG2RZo7BjW6IkyEENiE8GkxDVMKn\nm/lkpI7JFAYzD6n+PHgAzONgMxrw2maz/deDsIAIPlcF7n1uYyxzsR4QX/hx\nv1bt+fCy1xQHiSaflJ8+vMgtSosi5ijFpV3skTD/xTrKq1yXrQ0TROID4km7\n86Cf\r\n=/6cL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHP3Tl/YnuR/XUd4s9SsogeIyzFJvcAVfVzsKJM2Uku7AiEA4seFeqFveO2Exuoj76XaDNtY3HWccrMH9I0gAPAMKFM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.4a674a1d.0_1617374678020_0.7410718062406856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-ripple":"0.21.0-canary.c5b29ff1.0","@material/switch":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-04xDTx0s2uWMvuSHLs8egG/uD1xtuh9vIHvOMzhXvvu3wrcQ0uY8dxWD0pmzf2Snj46BgdpNVwXlMFEoq0rA5g==","shasum":"92cf16d266c565834acd1fa85ea26ac25a4852cc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03YCRA9TVsSAnZWagAAY6YP/1aoCBZKUpM/OPRPeMsN\nXjIH69kKHN5Ypmcr1k7/qJ3y44h1gkOSB9yrC5xlc08fPIeZ7NGMl3tUVE0I\n8fyHzrZBoOdypkCiEXtBD/FGuaLdaxSXr+Ch9aneuIzNdT2GbJyObjOYDPBY\nhrr3lEcuTPG3W/aQH50NACLui0nqCJAUhRIF4QlLxlexrJRj7k9fiGA9e8/F\nssm4IDJpyB7AYsoRogzRnQojue7qYZioHOFXsCPNb87tzn+VIOXcLakPF62d\nF6hIyp66EWPJgvCAeqAPnKfRrD3ykVO+IJG0pP9rilQ/eA1l+El8gkGpYdb9\nX0aCREOPi8rrfHpi1lq9T/icdfwlW6iC7gM4iFCpOg++Y59aSQUQC5PDWrOP\nij6gzCxoxfRE8aWxpud4ltBOktrDomzNy4V7obUtKCwYbw45Lqv/KsoR0TJz\n9sdPLp9soieoXTqOeI4EHNv1IW6bGWC0wldD41sH5b3zJbt8KWZtDcDzXdSl\nQhdsgQQcDhe+JCscdZFXyWp3QVEICrUqtqDRkjc9HQLYRu5ljmbLr78vT5pp\nMfclzRb//wED0X379uFugwajKNKA2hhJMezBw/gE7HfvoPtccVP1BDnycGvs\nyjc0AfCa5n70TQTJl++J4g0oS++5Ele+xYLdu6m1xl7uByfcKKVM1vuonp6Z\nveyf\r\n=Nxg5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGyQ0NYep7b0k/z7mR4slL2lhk/QGISaZFCHE3Le6n8wIgCKJwxMJwMCYpkiTb7Pg+fLifl+N20IHfqxaFhWKLEkY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.c5b29ff1.0_1617645016514_0.3704093229542835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.583644a6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-ripple":"0.21.0-canary.583644a6.0","@material/switch":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.94f50b260.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HabGbvwu4VAfncFyEBr7ka80y9yXYJJqHp//NZeekc8n6WqPcUBOYK16Vqjlq4F4nl3qFTHmyvc+5mvO4KZs/w==","shasum":"8ec0c38686c644bf18ab4244594035cfea0cfe63","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04aCRA9TVsSAnZWagAAYWYP/3VcV+AMfENN8Rc/NGCl\nVKzf+htvwdz4chN6DHQk8RPHEDX7cLHks8g82pYYoy1WWYj5T4bfKC1Gz/ZD\nhxFcB6et6JbzyAqB2zZfrYJbzx0vqspzF5s2Nd0rDDHnNf07RXYTki3FKHx4\n03D3tRw5XPIvgpkoFdP5s+Cs4LQzleCMV5rXWUBsQmjAUQ+l6KwUtu03Jp5Y\nmFbGIGp7KTeQwcFbQuI5Rd9N7+3OyZS+IbZ81rXNSUaif1j7BnnxuJ+jDSAA\nUp7+q4zKHf4j/2rimHX2xAykLzQSVcDJp59+HfiMAR9LjeXHwLzoRq5yKH5H\nFUwoKKfhQua1VcEcpMTuPyXmreTW+AuG9sZlUM88LKed/qfavz4B3jDl4uzt\nqhh0CSFlKNRGydMLFAvLhWz8nmw8jsYEuQfMys24bcxX+KPuCgvF/YWSiOrC\n1ZmJfUrS6mnS7e1eAnJ/kok0nDnig7teLH2QhoDflwqPo5ePG2jDbHVJotTr\nv1h5SjhtFiJvMADHk2FmZAP9mMr+HdviMqzd3q4SarYaxt4YCX1I550LfuF3\n3EXlN4KoHrkdo/OZ6EObLUpJfRiZ1du1Up9TVr3UT+75X750jZw6xzCJWT6Y\n2R38UbIB9/rzLqS++XID/4rvgxdLYQLkPFGEN/LsEe2KFEGZuOPlBPjRNYPJ\nkBeo\r\n=E3Pf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPQglwPW/cnR8ydjIE/LsOlV7C8ZgfcSyA3g0qYdbGwgIgGt0T2RX0YcYIVsaF1hs4iqRNl20sOYF5b5h1WEXSdFg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.583644a6.0_1617645081694_0.12768279368287794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-ripple":"0.21.0-canary.02ac1e6b.0","@material/switch":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uJsPzX8tzWZRMyH3+5OuhdjL6lkCAf94bNSTnMzCYyb0NGLKYxoOB5PV5KyJbEFnyzLIQ2WPSUes9YB4j8pLyg==","shasum":"f930a4292b55e2e2318718f90579402f055f789d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKo2CRA9TVsSAnZWagAAtc0QAJaBLILTc/tffuGb2w7M\nkfIu5cI+OA4+KUUCTXtAot00HNGPiU3leYk5U2a+WB111Mg0Yrk3cpVSGk5o\n83znNlV8zfIvRJOGvJdb2w51SkBGCjSZB9TMfyl1kfKkOiIImB6I5UmU0PAL\nqUg2UvEFypa8uJXBoiLG5knQpGli0rtN9/Gs43+drtcIieAk0536F052NHKP\nCTZt8idxK731oQDJ4utaO8pOWho3CmwMt9Ss7BnNp26xQEduvnlXTJVXil57\npHXSm1t/BgAm6lxjFDgt32ZxxSpf5CmRHRfICvckPrDQeqyRLFPsS5mU//aT\nk6qwRIz/qKvAVfAtEZQoI5IkiQrx9rdVsjxg2YzJEB6MbY8AcYxMRVNrTrVM\nGELHD7oxpcjmQ8AvoPRxxB7byHNsOSAg7tnhMtoOtHI/YEddiKl+tZnMmUZ4\nfXjjfpI+CbetGTtQUkuzxVDUSvSHVt/INb8E38avJJnkUesvn2dTPBV0PAvL\nRuHVq6kBIzqpR0CwRIbK2eoqrqwwCjb1oZgbFhGzwEHPwwGxFiC4Cdf4/kzH\nZUTCuNrs3hJXy+aiPzjwS7MM3sDpV0ZIiw/F7PvbJCz2rMq15QP2iQKiorLS\nvB/Mme7KzvHBQjn0+7/S1ct9dKriZ/pINl6h5R/x0qCnRPnbIfwBTfZNyD/6\nHc9q\r\n=6Iik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDh8aYPpnYWiaLZ7btEQ346P4HyMPmaU18AUN7HjaIm0AiEA6VCxH/DWOybAixZUbYXIkrJUpDyipLJDehEQu4PTwgI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.02ac1e6b.0_1617734198046_0.08228116491087123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.5ac5856e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-ripple":"0.21.0-canary.5ac5856e.0","@material/switch":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DnXrnf1zEIeSpUUnpjuVbk0d/MhW7IeZVN5Ks1WiN21EGtk2iBWjiQF7nzyc5eIFv+AyoJVx1VW+cG0iOYL0OQ==","shasum":"fe238bcfdef10efd236216dd9124a66ea0469f3e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKu3CRA9TVsSAnZWagAAbtQP+wWh0vea6sXSG8POv+7X\noWHGWd5Y36ihuHlpez3u2nmi7NmtRAsx0OJ9xw0RhF0mRnxsitSJqPZzWoPp\n4y6ij4iBDodc057Fjj9gbbfuyeYoe8pFhNHeunRIojTm2lFRQVS+02/LaX8a\nK2+A5RbJR9TobYBkYx0MToubaowwGwqzY2cXFaeqMy18e71r9uEimXGKJvuR\nO5yyW24d8n7q0Co03LbWFMoEcXyY4D0pq/N1ApHCmQgo7v02ufRm2BTD/nEv\ny6JDFTxfiYLNKQUAW7TtmD9nQLZBaaV1BrhRXKIRCmm517CP2h7yl2aiYQ5o\nP985lQAffqNQURjSJPgz6aD47GUCuuPh3nUKtYYcGG8Lsiy3Ck8NEfbq6j+h\ntzicUeiC+MmLYbCR+0TlKDypYW1Sakt33IwCslEInPnTWv9MupUq7rglwdOL\nBhVqQXibbQW1KnNp4yxSucc+eyJ9T9dOUSCCniFd/s22CeKCcVjcRbYvTHSK\nhpYpo0xnqqHlSS0HjNMgG4kshCNswmWiN/QQ9OXU2kFgL/rp2sFjLaJdyome\nqm0a8YRoqky3jeK+YxNbXQjSzNrfZ673Ij6b123RoyRBkr7rm26kwVPHXTe/\nYIzsVnyWz/4j71ccdx3/ZgTtmk95NoNfD+xFIiCAQLp0QyKNhx7Sm/lQBzUK\ntBUG\r\n=/tQJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfWVlLwm09hF9qfgTsyDjwDgnLVFh+Q675sgBwg2mwewIgXtvAERDPcbOd5i/7/ZcsasvhcPLHJ7fPWxDhh57AQtA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.5ac5856e.0_1617734582588_0.4574101253369982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-ripple":"0.21.0-canary.bb23dbc4.0","@material/switch":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LSPfiuIVQuros1ph6h1tISgQJvD466fLsvR07F0MGXQxo4l6FPxcYFbpUc797SwJdtPOFHM7LFTdFv+awJRyMw==","shasum":"0448778e60d2c6c6c0e816b97afa03ad4a8f89b2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiL3CRA9TVsSAnZWagAAIHUP/0s5PzKCjNyFPlj4Ykil\nuaz5sldcnOwk8p/4KejaqhbTpKigo8oxTBNy2n7bZX4gMOKk6NL1m/8aY6Rk\nKhdgi9ySL4Vx50yo+xAqtPm3mJKiEoYkDvZ2ATKPfVBvlFvHkk8EebMhAc0/\nFnFfXl0N80MCpTG082RJM3Kk1niJdqS8gdZ4c9qFw2LqvJK+Eaygpw3DaVG5\nS9jap/mSFLOuzWgbYgNP5YIX1+3fPUB0O8kbzUmazBh+RkzJT9hNM/2e1AtL\nqOEUdUs4ugNKGUE2/OjR2iixHYjKBBkOngyJiiNlGWkpLQtV0LNxuKYCMBSy\nABlTkUsPZXd6rxcQJG+RiQprUrEZeC1gYwybJK9ONLO9AXHW94flTr8VWw5a\nX7D+WOYFi3QNI+RSaehONE+K9JVVDvjt69qGcDfZCfYmsWn1TCicuQGhvUes\nKuKwotqfDFq989MHtNnMiX3zz+oEXopTSM6nFPDKS5lQSFyI2jVTO6f9MNcv\nv96Nz344Yw5U6H2rFj0Gt5HQsx8DWMBSsD+n3Fr9nP2rdXJfVTL2+6NrUNw6\n8DWZiZ54rIU2zuiWmOL9CGgZuSxiN/4s9jwK2SdzY36KsehPZMG2mphWaD1i\n+P2U8Mv09pdGo9tnCrIlSOHb40hujiHbmp4foQ6XBUS3ocWRA4nzUxNnM+Dw\n8KGK\r\n=cBnD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRI/4TAweuHtowKPNysPXE4DIxTIJKx7c5wooWF22AhAiEAyMe3YP5o4RocIiyYNoTO8qj/ziE56c3fcWDkYvwUzHM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.bb23dbc4.0_1617830647432_0.5456162092459773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.e539904c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-ripple":"0.21.0-canary.e539904c.0","@material/switch":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c91e8d141.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MSvP/ZPV8uXpqXKr/+c4wWWj3ECUrxIUgA9KUCWAiwvvBfI521fRoNcaRAOcCpfXFtXXAeK750VhMh7Ovfup6A==","shasum":"8c61391665c939e17dcbf5bf217d1d6ce3f291a7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UoCRA9TVsSAnZWagAAwboP/A5P07vRTmm9a7LArXiq\n8Ig62vVltd32I6owY4WT/D3Z9bboB15XtXyYMJM4soBbS2g+HX0JnCBDKHls\ni+4lhpQOuTbuIkXskk4FN7FEYi6Uz5AQGYYzYDmzpGNtfk349RnBH0O80dRu\nxzy5xYzyFsD+/q9+xKbnJR6ZYcfNgqKS+bUSDisMslYYdJwLc5koe/aXVBdF\nYsTV0P6RvC0oj+xzAMheYCk7Zs5ubrzMyxGMXtF6b9+KFGJPxsS4/HBbjGHz\nhUQhORXCHsGP1iI8e5vCaFu/ZeMhve2nC0zxFhxhFEzM4kCO7r2OZciWlSav\nq4a9R0TPV8dNW6+hnU+iOlbPs+/bVbGRVVQIcQ0NdyHAHd9aRjlBxYK+zK6z\n9l8b5D2zkO4r4MBTJ/P3lmu832puLFTgb4FI+g3iHFRluCHvFlSFDjZvu1eQ\n75hf31UkDr9Oi49kqvP8FK0qq5OObnuMwC72rkzFT5irSo5+opMBBVPHgSJ1\nIRw7+lAvOaEF/KgehO+aJxXFxWa/aMkIMbpSIyY/WQ1aUJN9bOv/OkgNkknI\nFVCbnpkuvNOLFiJ+K7tvFK3Ng1RNOiM4/CvzZIPyqaO+aPV08NfNIhq4Y0Zc\nP8wWPr0tR/TXO8FQT1YPTCmKNYNWRR25XFjutkamz2OzcuJYOUp1J0YMfHhB\nxA2d\r\n=TggT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqvmEpEf2vnkc5WMI7WwJ8Qhs1L2ar9KC/fjykMdKGMAIhAJGUmNlYklb18U0sTUokzZkgACLqpEF/kkNG9XccEmXr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.e539904c.0_1617904936375_0.5128427602276673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.a93ae333.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-ripple":"0.21.0-canary.a93ae333.0","@material/switch":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8Z8BJ7BzAXjCC2ALo8WyB9972bMrnCk2TLySPvBHSAngdNtWge5jKG6ok7a6+o9K9ErINq4SQdkszMTNhIwv/w==","shasum":"ab473a99ca0f5c1eab1f382b77751d9f4152a3fd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUHCRA9TVsSAnZWagAADwcP/0/2D03JxylF9yXvdEvp\nP2IHpUrC6r1VABmmIX3VR0vmcEB+C47dms+yt8N1uT6sLBaIfhQfhj5GSole\nIQWpMLs/ceFhNybDAAXjOqjXcXQ7coIx5JHvIRDzn48aEgDT3Lp01XUSuetd\nbIoGiwAdPxWSWZlmn0N95MCN9juztfKGDPnBnyyekwNZjmMpIxDs3NzcIgnB\nmHs79H4ayyztoQFrhrJaQgnsAwYYes+eNr1OqbTvSPhMIJz1ALuoeZFTjsvB\n1b/tS2h2QPDRrtZokUv4e1wTfEM1p0ySwVMmi3LIqspLKhroFGQe5WbtSOFp\nq/CTIo66q+oShZHtg5pVFRfCCy+hiFm95nNFeu5SpfOZzP3pcEKfe1p89rws\nMvQr8/NkZdj95xlVYUljgLpdV2MoO+uqCub0HL9jnfyQEGIWE02doycYn/Xg\n1HpDaJuyg+MQrMtp5g/uztX16nsgZd2rPUBpxTj0QzcZfEJWtFKQGcNKBHjt\nEyXa06QY4fwzIoHnK5oWSwAQZDv0xb2YLA3N5LxqSYc/7c2Tb9pEmlBLdFuN\nMmNjMlKsXwB9x0j9V7JCtew8VqpsFqsy8ta4rFVXIJy/iMB1Ywo1CF7P3Aok\n5CzXuUuZp7iGZMkwjo6giVrKcklIHqzNI8NDUdHU1RgWBmWeCkSFiEEs5xpD\nhKhG\r\n=WlaD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsIYu/PdqJnCn3P7nge7O6OZaqTl8iSVLjHg1X7uQVsAIgf5weNM40HjA0l9JuTJcc0bIDPOcM2lHXoeA14V+twsw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.a93ae333.0_1617999111146_0.5000278320125608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.e142c144.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-ripple":"0.21.0-canary.e142c144.0","@material/switch":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vkeAojRTwZ1H75lSJ/Q+ZQJqmTNQgjYFHP3axXPwWcrWFpJMsT9+4cZHdFFG7b6mGHHOmD824ZmomGtpvL+YDw==","shasum":"f6e82fc811356f7574a99184e959e8b705d2f9aa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5OCRA9TVsSAnZWagAAqc0QAJtbgIlxtpbA8TZ90OV6\nP0vXLorST8bDF24c1GQlTyqihgmnSSc4XxRB4AvgLUaU019RdehubH7d4bHo\ngZGwe+OM9+mlH77zg1gIbT7RTPofDhK0BeAdouMSrrxgAJvRkxcJwW0DSD/2\nrP16p9jTvj8+TaLpqXND7RUJnV+wXaHhDnVhE+2fDyi5X11ce8X0DKJd8gOV\ng9JjNjkE5EpB/mA9j4pnBYm4+BVxGwG/+E5MXRpCTlbA65c2gZ2XBrWjk0Px\nvEIwPBZeahybjlbq0EOzL6Lqsg1Gy8aVxhbwmEjWtiYFZ5cckrDrZGQ5yp6q\n40EdLGf1KgLVt2VshOlZYUGy+cnI6wmkeYp5fDoC9faFZrwmktgCidaI3lOM\nWVml9aVBykaTHgk94be6oL41V8QUwkvSoZ3a2LdgCIQNQstlME9s0/bIu0Mt\npV9unlOiRAbv2bQAZ/HhAB8oDsLRyf1rCGV8YAOb9zRz71b2hSLcp05P14hP\ndDT7TR1qiuAoXEdJf0uve8pNY9+GaX+UEzU5OJBjcEKOxUj9oZUweEV6qPsN\ng9OhlSgAsYP2MSBJ0W4zW/+r2Sx5TX2cuQdIlcUpajW3uKTEwck+DJFsG1ur\nOyJniUkGMiN2ePXK/xRguzHYi3jCHG0I4sd+er+TYZUMUjdc93TH1dJpzzlB\n9vMb\r\n=NBZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBHjQO1dvhqPvHoSLgVYEWimqdjZPDvtI6lxZJicpylcAiEAzrZ679Mwf3Mr/bYviVfsjL9/VhrYp5TVBLXgB1yJyaA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.e142c144.0_1618239054342_0.1218147105525147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.382d7eb0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-ripple":"0.21.0-canary.382d7eb0.0","@material/switch":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-AxL2hFxeBRJILSCn64bCOseg5BGLGuNSSOl+p4kobaPsfYrkPYYLY3hK9R+Tqvy0Yx3KauZfE3ktyZKhGRMcFQ==","shasum":"d7bce3606b5cc72ec46e23aea254c6da4098e33a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQ6CRA9TVsSAnZWagAAjJ4P/1SeBXML1EVCIJ1CGWl0\nZrupUUwZF9SdS3mSdZZ8BB4pKI6vi+DtykHGvzyb+3+apW7/TULHwcE2jod5\nlOEH05N5t9VQL6vQTiZ92JWQO1LoSnuwwPoWNePpbMQqd5yY62YX0DJlxlyv\nFk51ykNXzazK7r7CVGhiXvN6ZcLS1f6gfmloygLdRn9ime+0sOYF77NQZpuU\nmHf+K3RmNxHCm4jIWfoMSVSzMJ3cuKwHaDSObFr7ykb6Q/4SYkrhdFxGP18M\nwiLhy2/b0Yk96m6XkRxQsDnEgymjA9fh3PkCLQHlzzn1rBb32q4oadmE00n+\nEu0IxEfKJ5YyzzkHIJCIA8X7l3rdRFKDOYOxqFwooCazODczsfTQ9ZwUjfU0\ndPl3gFOO+/R21RRpzpPhJQd9XcIw9l6YAo2xS6TfCYCmcZ7FpsZQJ1EAMRAP\nJ+elsKttcRLjbCAPrq/F4oS5WAseOn38GdUgHUTMAIKdmZPrN82rPik6Hqzj\naOeBJi3qP3PzN16/81BRCIgm9dmvyJT9I4iZ27j+WqaJh7vNP3ZVv5npOUh0\ndA8W+qYZFqdmwadmnFe+6ZYeAuiKB2UU5KUFX9faeH/GqJgY95MdhkLtLxcp\n4bcAbNHwT+J8OeXaU8GvfLrFm58FKCdivvjbuu09xtYnrYOsZaz0liOCy0YO\nJJm2\r\n=Wo+n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeOpla962w9cWOv3SFVPxODie8nlxVTkzxIx1DRy/geAiBMFe0NbCdHMmtGiPqdJNhUYBExtoK/xqUNmZqfkBTgZw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.382d7eb0.0_1618265145806_0.48275296701638615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.b16c7885.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-ripple":"0.21.0-canary.b16c7885.0","@material/switch":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.352b295c1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tiF2dqIAgzrLSSAN9gUvPM66F89zzzZ/5f/8r8rorzZpPewnYwwwB8XSiH8PjAbVtFZ9uRUeJzZk39qOSiX6Ow==","shasum":"683240b7c2264496e26d1870ede39aaa49c03c85","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwcCRA9TVsSAnZWagAALSoP/38cLUffSwwm5DlSO4Jg\naZeUyTAr9iAcEwDOw4wXMG9xEfXWg4YjRx3iWcn2R7S36OPXJhAQdC/fAUm1\nRVx48WN8T52ePvmS+IBGOJRPNdTvmm0dIEE8Kf5yicr2X1gqJIO+XT6d2G8r\nnF64/x3w2I5TmUsKeFjq3n2iBiF90pjJAXpzksXmsJN9zIp1AHgLVZvKZMAb\n2MSPkhiJnvs7uV2orQcR0w4vh4zBuukfhd1AgHc33ruVd5QUpuffaE0I8HQC\nsJxTMMOXQqfDzBFkJERIOx2o+zobwdPzTBD7Hu28C7/nXFIIBLanYyPc9Ws2\nKD0e1XU9VYSvijAtyXKT3KDcMYZoK070pFn22R1iKOE7UW0qkEtOixsMGLkX\n99t/Z5oAWA3rlUYHiRs3kmRAq5R1bc4eTtb9pFWIs3lrLuS1Z/dlrOsW8Yag\nE4kH48fxgpw8478K8EWO8uCsK74BYMqsdZkvd0+VFmABu9ddlhyGAfxsaDBc\nsv8wpoxrc9vKOg3oY34Aln7+3/GgZIINleC+zAUa9w6rFH5LHvwZ4MD5fX/X\nB8vX8XAhZ7ZJ/Zct3dnoqS89SQMxtn9MI8ETap+Dux8EGjn4Q5jgdFcc2Nak\na7N6gVy27Bp0/XkQ/SR5M8BRQloNkRVJ1uVjkmKS8fvY60HDuvtIZC7IjqEL\n+KK+\r\n=RklY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKW5769/bvodOtcVgEuacnAs5hVSD5szJ2PChTkGxGfQIgfOfVwGGdFz5N1s6xiCy1ggdZmMW/EmyQNNtteE+E3r4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.b16c7885.0_1618267164551_0.8011727803051032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.0e92782b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-ripple":"0.21.0-canary.0e92782b.0","@material/switch":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.352b295c1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BaV/ilzLj1EHcwTFZYPVPSHF+sbkURB4lZUOLlGpbY4WLtNfejocM2n/BPofWLnYzbRJOQbHrp2KELJTCsCuKg==","shasum":"b8c17dd2d3e5112ed8e5cb7472f721638b2c021c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3ACRA9TVsSAnZWagAAPsUQAKLKwdaYNN3HjXTlOjuW\njLDSk82KY0tqHScR6/59RcP0UFwdn6NNrWizvujCbOGA6eGzxFV9ILncKYng\nMY/zJKFYMkaQCx8qJ59yS1/lCpQduQ7Ak+VNekKSJa9rRM8g3/dV+LKrNHZu\ng/TTeLjxE2RZQA+98PvUMdvgCdBueAuoHfauWwwVK/CDHBZhEzX+DQXS+aYP\nru++D5cxlU1ci/98yqfBXoPPORJ9tq9zo68v5KgYw+3yi3eftUaB821l95iw\nnrjK4+ciSckKem+7TfYSYsS/Ob0p2cD0ZPpFIoSqnomOfFOC6+0WCov3GBNS\nzL2REw0Rj83SzlC/6415N3pwCRFulZ/cqym11YA3g1zZRRD8yeebRBYjUE4R\nAmWvvQH7W4dH58MtHJu3thzmuwgQHRWW5B1EYk5GJWYrP3vVI7NWsFBO1NV2\n1f2QNo00Jhc63wNrEYeHjeixkYkcN3Er+1DFmElbJySjmur2Lw9wzCnIO9i/\n+qrucdoQa8qVJdQ1lZZu4yWHOteP9BD6jL82fGfdXWa0XQGeAyUQc3WFr5kZ\nCa/g79YCclDbOx2xP2gIp6gEkZUNrDO29LQ8lMmvCSV5rBv7NZFXNkjQqPq9\n4O1s1J/SPO0UR7NVgFCl6Chwoz5A2/ieF+cpQYf5SxtDFe0+kxkehWXIzbso\nah+K\r\n=4Q8L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFl+X6NjEqKxiJ0zh4qox+2f5QWhMcUZ5gvqtU6Lb71AiAAzdfLmI7BdkBSG9Jnn3UJQMIz3DrWwuYfkGW0SOqfSg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.0e92782b.0_1618324927691_0.19042240002774413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.70b3a072.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-ripple":"0.21.0-canary.70b3a072.0","@material/switch":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.352b295c1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-N0w+Oeb1CDXv45Lk0inS7IZ9m5oDX/yFdy6YGpEb8h57uaXo0WyuicK1XFQPHU8bSrVaKMAExV6qkYtFFgi+Vg==","shasum":"563318fd3ed32d55842a0e5ef6780a46c48306d6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wZCRA9TVsSAnZWagAAMcgQAJc/M+nZCdwRwuekw/vW\n2+Wq90uWImCDP7YJ1EPxQvmpaxJ6GcqVNc6IrAy5ZSF9PhXT6m2BeWvrqQXb\n0c0Ktv7F8OmR6WMUWvh9hDpsemV9WO9aubp8BNPeF0IUzvxU/39pwlDsliaG\n+9a26FSBdS9g1oA72sefbX6HEhyqWCMmPwjZfaGEARQ0Rlq8C5L+LVb0Y8lX\nx9Oa2Jjw61sXKatwcCo34a3a3hYy9fMCTxu7BM+Wetm4cKaTjUAW1PRXYHQh\nJRV69yAyvaOFD3ZvJSDQBE0JLMaxuiMCDXSsZmqtpSj+FMk02W/eOqduDvnP\nX+NTLcHWG9zGuTLqvnNoY/gy8JCuMotQi/w29z4LsOktVdXW4K3W50Wye+LG\nxx/dkbHDXfuQ0JqBMemip7bMwJETFM6AavykLCzeWzvB36Lc8TCUIyUyma9u\n9QapOXL+zwmEf9C8DORvBpkCg0NKW2Zp6PQk0+K0X8nEJksEjveyi6mEWQd1\nCM/deFvyJENChNW41mzMGPwoaRXy9k5yrzdncPsAvwNgiKsu7sHNXafThJi6\nqyzibfrqjoYL8hD6JbdVK3rdL9Yef0CpVHLw/MAzWfXC6xuMUWPqwtAAYewf\n65H4B6W9cDweb3BaLHf0PJB6MgNg9mvohcjmCTTCQnzjSPgAknTGETUDKDqI\n/rsp\r\n=qDXZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiGEbEvYPkOY5Zl9/x88/h4N7rilimGa8IVKT7JShdMgIgNl2c/dZMSjTvwAY8J8OKXEgrq+cu0K0iNPsqg/agX2Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.70b3a072.0_1618439192894_0.47916211082968285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.ff79b092.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-ripple":"0.21.0-canary.ff79b092.0","@material/switch":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.3793a3143.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RgkFni+xHl3aYYTLNRf268LC+s8h5aXNERV2ZbLiew89Tj4Og82aJDteEuYntDkqy6Fbj7yb6ZrjWOGAnAyUuQ==","shasum":"760fa5ae598546d2830d1d0fc60570242b3f24da","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":44550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0+CRA9TVsSAnZWagAAgokP/0qRTO52S2B04Ea625Xa\n3OWKnkL0nItSLqRySoiaUl/qKLVHiBJMMeD1SYJHqQRTqpdLciSyCvulxuU+\nZKZ4Yyo/IPKBEUZhCckuccZqRtkOkbcBTbsQWjy6jtmXkNXqeaxM2p9ZFYW3\nOWpVHSOyO0/orB82+CTSc9FveoONejEWDjsCEiOyF554iuaAAmtEc9TsZ+IS\nZXGtGMg+CZ+dubrWqN9ITCcwwNZ2OrCRwZOhmdHkDYPjVYj91Q10e7t7doJJ\n4M5s3CPr7Qmda0EGhevBCpLkuiGr2oSZbvf9UaLOoGVmxfzmpNJSTj458iOk\n6Uy8tJzPiIblDG5b0cNK+RIIbZQ5QfTfyJS71QOZWkl2TK8ly6QwyjWRYn4l\nFi4SL2oZ1vSCOXKMdtS43tMxNWBd6XbqFOVD01u0vOA1vHSvZXduyX9gc0KW\nYu7B0eBMp1jEtGqW2Ffe7/4XtcSoNHK9mPy6oBToyKcQyjhNjZy3lKPRSIIU\nF6HEujj1U+gTdwMUPwpKfE/KEOPphOeyZ/U/+fZRC/GB4K8O7pk48BugfGm6\n4Y9ZzCQHgoVFo59vCFnRWq/tvPnpmdryYXW+HcD1kvNqJmmbd2VIoL5FIfCd\nhr36X4yJ/1daMvEdnxDfS+O2UuDCWNpH1G+/W8yaZVMyQUL1nNxDekBVjpB0\nmNri\r\n=GlbY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJeOl3vgTq85aXvFP7dscKyN1DpBMQCpQMhPOLFb61XwIgWJ+rTWG29NVQse3IekIQGY/3pj4+CuTvX9zuuXdqXWM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.ff79b092.0_1618513213540_0.17678980543840805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-ripple":"0.21.0-canary.f35b2fd7.0","@material/switch":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.3793a3143.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vDyU8+wGIdk2X/mBhZN34JZ75ITZtMeKD9Z5aq3AJoQYhXNGj4/aHX89NrSv7N3sJRRorSwdmJ3tl2O8YcLVNg==","shasum":"88d7f65f94ce974cba0d40bd490b1f315dcb7087","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":44626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+sCRA9TVsSAnZWagAAgukP/19Z3Bh5CdJ0CZR+GF3e\n25DVPaRTKYXsMdkeinYFeSLTiHKOYnORf1SypQ9oUn5FqfGjlcPCKFz1ZULW\nTC/Ef/bsm77h+pF59Oi4cM9KAfDSjGC3UGzt4RVCPanXJrY8d1v2cL80Rw3i\nPcURoy7rvOWD0irKmXjNTLbyWKnPpQJCP95rKuhE2DvF8hKVQUVzwDI80a9g\n4UKt1tLEHwxI6dHKvDkvEvXtRjCKnViKqa0TRwyKfIJc2sPxVKB4ALc6Xqzc\ny/oMl2G3jnuI+3WuQTp4h+GWRZUwm6rodojwW5R6JDCnoBxco0294M38goDU\nHZ0TIJlzR2fttSLAyN3zRcmNNjjIkre+yuG1yzXvqFshUTLQcEUupLLwtdW1\ncSYBJoA05l73SjHt0d8ecgm+mE0RIPLDJ+gQF3ypLioEr4Ej+5rZY5tKSLga\nim8a84+Rf5fTPP0/jaKEKQnrd7tde6fDmBTuCXKu8CfXDEjh9BUI3Z05sTNo\nbySsnek2HhOsoRVP5g5MLepYiF1IcIVTUGral/ThNeh88FhN5nwpdWpVIABZ\n3qgGtFzEJRi5zPA2faK8eiOBNC9kc8YFl5/vUQWTn6y9rVOV9u1VJIx2ncO4\nvCsehUGAsrLgQc5nK9XfwgwZC6uAYnJRmoQbn8KpEXdqH4Dqwh83ZdWioHLl\nIRNe\r\n=OBSU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+3fIKwfPfjVYnVP7ZLhudHpNYRp5NkT0De2XldoLlcAiBUfoaf3rpZQWItG9pewGuAYmFUVX2frRD/oceaXHoong=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.f35b2fd7.0_1618513835769_0.11440990162865461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.11977cac.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-ripple":"0.21.0-canary.11977cac.0","@material/switch":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f342c3f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sCo92RWMr9eMwt6G5EOWsc5bQASuGB7pN7odnscim7BS2Kt+99Q3TKTv8rODk4vNAOuo1pCwW1ND5f+gienGWw==","shasum":"fd26832f34a665ba13244bc82967f779ed8c1467","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":44626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEpCRA9TVsSAnZWagAAMNAP/35NwIPcCt1zaZNU09a2\nxPyT4LvBNmWZjGr19B44zLABXVNXNO24mgOfROwjT8v/hR1WH1R26pp8fHy+\n1yE9tWl/xVuL6xgH3HSU03G9awLosWNNg52pDqrUX4I/MKlyp36oA3sbRHAn\n0H5wR6Eb+zWzubYS9b5ElgbSNDAb7zh9U7ki3pIVYH5Brf0oJuLNfImYUtfs\nOQ066/h9v6nx2EoeJRQ2Aai2tNOfxrFo9PffvEeQe5S7VG949RCS2f2LUvil\nTKIzxhYe96bnWwnMVyLMtaBetx4QOBuVH5OY9qqg+4biBVEn7rZKRrPnjpOc\nEOStBl/squ4oJeIbQ89FxEOYghtIDnm8sVG1XiqYBAGzkEmd3+JxfXgR01jl\nmP0QLa+NIDrXTO6tv1c5BMxyruvesK69McIIx7ayqutGg0t3AsX2VsruO7bl\niQ06ec8PGGgO0CMd4p4EpTnWQQ6wz0ntw+J+jVCNpBoUA0XdCyjn+SKSaTEh\nNqFtfUKnMJ1BiaG5fOe1c0ZkcQFnhb04VpJvPNCd28gXwbtw+KVYT+gxUu2m\nSaloueo6Ud80hwjeKfYJJqq3skd30MIHmJ62A0qftAYSgrKbuMh2hyOKKwVJ\nG5VQQuZlePUMfjZGZMuoN0eIXAyBODiOrgIvqRLCFoCbC4Eq9YTA52S3JGJV\nTu9A\r\n=hLeg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCksroOwu2tcLXF+2sxhS1FImAwH7EOsOiA/0K+aagcuwIhAJ22/psx6Ek0ucBNhMQ8zluCQhyuldHF9LuE1qC4OrOW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.11977cac.0_1618534696911_0.504263048265011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.018ff45e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-ripple":"0.21.0-canary.018ff45e.0","@material/switch":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.cad489689.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l63e/8DdBtUOE59qCp000uy0apfchARXUFRIpcKCt6vvBxdnVOGztzWppqXI9DAL6600M4GGNZeL7IDGy30a2Q==","shasum":"268d3affc8cae81a02b9bedaa922a6a1ca48b419","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":44626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3lCRA9TVsSAnZWagAAVn8P/jNCYhSGEIJciKyA0ZdC\nCj7PNQ+QHvp8bE+ZwkkhtircgNSegdvRfJ5ac8rfTeI2QiyM06Vf5L79D9xi\npUBrA67uL3d2KwI0K7/1pHmAmF/v0AYc+s3Oq7oYuTiivp5Nw0+fWU87ffw6\nraxS+fdS7rr3fkl6vcsapsChVPacpRWmlj0X3S6InSgmMpxlmLUCP+7JEqHz\nH+fJ/KCV5vR54/P/Wg/kMSSWKfSPeAt7Mm+6y2lFkwEjvyMV+ZBtdXhodB2h\nfz0bzR9/fLC/N8n5cN07jHAqT9BCDEsHBMBzu2saoMq5zTRneLhp7Mti5APQ\nZ41hqS2t7ze5gAvFzMjSyasmspEC+pb1B+xVqNgUAjDwxX3lrRh9wCefPiv4\nCypLQfG8YN1ClDEAjwEvJ8mSbiIwAKDFMeJdpIDrOXcV92fUigMVYemdmlkN\npTU3EnhFVtI/pNO1iSrD+AId/losG+Oip/XnbS97skew4fK4qpRp4UQOpPXp\ndScD4vFYw/Ja1H+INuNhTuErCa9l4oRqcRBLjcxrWP9hFImqLm1HGQvYCs1/\nfI4Y6A3DkOlS3KDCboI0/MyZPJmW+uCsSDYp76TP/ozKfhg5Slr/hYGYEBpH\nu17O+gWAMVTNunHjV0YwCM0bDlH7/jB9nK+oKop8WPMIVx7Ri6C18i4+UHEp\nSwV8\r\n=GNjD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqNyruWP+bQrq8auI+HwFU3BocNJU+/x4Jub1S/y6iAwIhAMi7NPG5VDMLe8XUXiYid9X7MjtpgUkmNwk+thD3DkaV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.018ff45e.0_1619131877148_0.4537790708632199"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-ripple":"0.21.0-canary.c99d1fa5.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eOZqGS9OiN6NsZ+CiYq78bJcffZCt08cMUys74TPi8V/GgF39r9rFS4/rtCpRv2t89wjLcRHHfgbZn65BNE2JA==","shasum":"821d8f5f4a6e7fa87ef655409114627f1ad0e611","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":44626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxirCRA9TVsSAnZWagAA+/UP/1aRHAJgT4Pe3X3ybukH\njymM8/cgTrqXKDGZItrpnE2XbtzQBmDYo3homqSx8uSu9G9xTxOdl2/sNkxY\n8S5Nen6zknMWh9bMuNimf7i/V+OXEi2LoptedFOXIi+c3u6NNfWZx9tPyncP\nt7guJ8qcL4BU+/dk/jptEIC3PW0CVd2okjMESiPDeL3Z4kQpgfwVIsmhVZeo\nt92Ac3ywMDCWQlXN3zl9rQ9ajxfS6cUD3obj6Zuxw4xyFUAVcMRFPZ/zY+2K\nyOcUfZ5WfDuEtjuiGnvLjYJiY7g4QqKsaTToW4Y1SK83iyQ8BfSDjlog2OHi\n+CUmlpyvMUZ7Uz11b+aBKQ98OAyUZf9cIasEBLv3C4PXtUZsf78dDvgz3ANZ\n8WENuu77+fU0SVIHLxJqBKRstiKcAJlZgXIL66dUKY5j8zqHM7LnSuML3diB\ngxitaE6IWz/U5/zH71wv0nbAYqft5f+ehPym5opMoWgXM7A8RE9HdPaZPObG\nE28FvHW+evcoB7DiLzyX7YSf78bhgjyJG8UZFenJ44k6hZM+45kDXKhhpZ4+\nKZztYNu58j3E3kbciZpFY/66l18G5lJBHmfr8tuOfFVieO0rNQzKnRyMIt1Y\nN9KZM6rh3hy6mJP03EFbOVWtU9SNfbky/infmlWsYMOUmiArKsHtg2OLp457\nn3Li\r\n=iC3x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxenfJcMVyGTeymmYlubEfW0+5B6oK6nRUGJkfCZqWMAiAe+21Y6DEcFkM61NNnqtEjJuKrGtXHAC+V1yvCM0Pzzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.c99d1fa5.0_1619466410944_0.861752496947283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.eea9b304.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-ripple":"0.21.0-canary.eea9b304.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nY8gbeTwuCzIt9KNpPlaxPwYmY5HEcWiXjXXb00moq0vtE/INRQEESsf4qb/L/Nwp+nFONsaUBpJJHiwjAhsTw==","shasum":"8a80defb86c3e6c26970b08ce419bd457b3cb9e2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXlCRA9TVsSAnZWagAAEwgP/2c+G8wmO7Gxzg7XdzYi\n3SestC+n6tFAh4MLCEzLBkkOfWZiofoFOyVzWKY2fHRV6eJzfflJuMSc9gBG\nU+JHmlmT0pjKPQyxhWF8XqNdHI0Bw0ozIXjOnE8NE5QvpghcPvrdLxLse+mL\ncOZm4oOWDgwhbhazHgHPqGlWPkepVctI1Cfbl5zpBbRDs5dE6aMdZ8bxb75w\nsLk3C8Ex8VxztkA+XRWJEMF3m3UxGBzgEmgrT2tRW4Wnh0/3paonJlpEPWAs\noIXCSR4c1/CUvMde6FOkUlQ5GrOZ9n7tXdSdsmYX99dF3sNMWf2HDhGGUy3n\n+LSzMCJGeoJiNY1AQPRkG75Tftc3Zbu4XtkXCFfhxd2cyUuupnys383TblTt\n22bwROmQZWQl2uI/FZT+JlK+P+2sysWMu8v7IB/OcpKnJqOsIFPjiUOkQVev\nokmBjxoTeajAGZAVQwSM81AEeMQ3bBJsn3AxLE80RuqUEvQBdu7Wt86gcqKO\nCDvbqc0fi8sb3gWlYw/Us7R1Wl5wORTN/89gaBF3hZuyA8bxJtCvQOYjwfIT\niumFJHIvNzJodTtc2RTPoJ3t81+np5hybiEI6CDyGFA9HzRCwUA82vz4axSN\npR0xQK9i4WrlGlixbNiw5rTSY5aiKKZoIVIES2jqncqrz6jegwhip/CgY/cy\nwRee\r\n=Emu0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrWP+6fsUXHOyJfhIleKox/lUGJe0jM7rziXsa6nOYMAiEAmYAV80Hez5NYr+djiWpL6Q1RlRI3HXfzhfvhS/R5+1Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.eea9b304.0_1619564004864_0.08172971358077663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-ripple":"0.21.0-canary.5dd85d0c.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8ojGGKubBUpRORJBD/QSOTM9EpxeYaJA+uUo9g2g4v3U6bToljxYdfYl6bebS6rUSJIkF4JJAUaaF9L5P8vDng==","shasum":"f6fddd7680f3960ebfb122ff5438a874ad097393","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfICRA9TVsSAnZWagAAR24P+wejdvKmh3kfHrc/0hy8\nS4XCYfuATjLcRsE/jDmR4suJDEki/5LsjKe29HRE3wAaplHGXCBMdGsw/M1E\nvto3Q9u1jp5UCojpe5Zp4NMJS+CDTD7JFhdVjDGdrWp775+Rt9JNeaNU20rt\nvAPg0ePTRKkx841XGGsNFuBMcvvjTcqHee/xKpON1JFV35GAw/GOPhpSgjqw\n4d0ySRTkbIjJt1IBLBr0YC1CkpVnelrlOVVwHA9oObIv3e8SCEomQrAbJZxQ\n8bPUlv5HS0UGpbQeHslbJR8jsaYUGrJNuZPaAYYqYxvGbWm5nb7zznmeNSl7\nooBU26owucZcg0JJV9kvU17AQ9c32YswpAeLv1x0Z9Ior3CMDQu4jg0dZqE2\nYeD5o3Ci/p1KjVDrHDLKP/Vpb2OOyvm0nPmwHV0vhiX1mBgHtVgOpmIvuf8+\nFgmaECwzTdmQyTUxUPK9DlKdKKttK56YfujwkPdYAUoiiRn5T+CqwTsp1zo9\n2om47+fBeVEvdVGWq4sm00+3UJgrIKGPfpCM3Fvy2/LxNiSgnLUf4c4cwaDo\nMRrUQPBAAn/FFKUn4o9WOaj6zVdgLQpEMeLlFtB+ZT6VN0RhsTzFd6OwOs/U\n3JQ/sBffp1x/Cyd/Hc50/GfgMsF40TmoENO9cVFrsczi2jgplOAV9eDQlT1c\npqpL\r\n=GMlE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2uagkXp0Izi+vzOEevZCa4t2BK155b2gj9ikX2impugIgdAFk3TNe6fEXgEHJbUYOTv58jlv6e0qbVxiGN4z6bnM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.5dd85d0c.0_1619568584197_0.17468474886356922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.cc813cff.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-ripple":"0.21.0-canary.cc813cff.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zM6BrgS65m07HdDAPrTr6A6Ge7qmid5yCyxuV8q/bzbP2c7vYod2N3lN1SSy9TDmyyhWGn+G4qmiAzekfHXofA==","shasum":"3d517ce5ee0952c799ecdaa51faa4ead1e741aee","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRlCRA9TVsSAnZWagAAGlIP/1OihdRaz9YRqg+cztHt\ntQChHNmv/vl9+paDWFAgKylTq1/HNIey2Cslnm/dzFVJzQN13TrAsru/VVVY\nf0zngVextpsvayrGu9zp51IHjPIEI3wLRkKuLkDkUFhDvtpyMhs8NdXLbftY\nL9SzDIQRjpZckHThs8pypf+c9ytn+u+AvLT9v7mR6FEsqso2GngyE48L7ATa\nfulVJXu+WxDI542ElXQGfdAqRNE21bk+nsFifgxq3L8tiWmL7tBoXpjEVzwq\nbX7Xpqz+rgGckecWs6F2dMNQn5hIi1SskJgPyz2reTwyJUXY9dNFJPryXZWl\nn7AAE+XBOzIuC63lMUyo1LBYWcI5tF8UFJaqemMYEv+91hpUZK3KxLCByN6P\n4wdIdIiN6nqCD17VkYp+A4UIDRdEQLFtilajtXuuTHPdKlzke7iUJIENY5Ox\n3LtRHNEgzBhTz9DVNPP2GXqwLJld4FqDnrWlqzpDc48lsKqpesx19lppTrzd\n7NU1Jjk748TFk6AE1V9Aqok+J5JuXC8v6Hlul9Ybgkfvqu4O5HTW5t0PLSha\nJgG2gD+X30M17S0xyTijpR9jYfZd0Gz6wYeiUz7uqF1+fRlOdowC5ww0hWQl\n1wCVdTcosR+nvkKAa5iTJrMJFJ1uqSstvoczkLMdJ2tZB13gJTVmkMfaWLBD\n+29l\r\n=Pz++\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClHwLdBbplt7rbSU5fUFfFp4M84+dkSyiQAoFg8NwY7AiAJehynATzkVtOZImDnSAVg8QR/J1s0sIMv3vi4tixz8g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.cc813cff.0_1619817572693_0.2836951950189308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-switch","version":"0.21.0-canary.0875e898.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-ripple":"0.21.0-canary.0875e898.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R9GNkIN9hGlhlwinyos0Fg4LdW36xwOk7xE6mhxwYdZL5ORxkT11TUTpLyjbyX4QYnW2rbAxkeXT/i6zUZcz/Q==","shasum":"f7531be15139b7d1e5cf9bbfdb3f6d21cc1d5596","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZPCRA9TVsSAnZWagAAxz8P/1mh7+O38Vr8K6A7Nk5k\n0Dli0a1sblx4Pzp9AVzmCu7OJIhwJkOKg8/p0bRb05m8DaSNQoDftWiWFNEq\nb7N2VwSK4QAhDZM7+htGA4U8N9oBZGkehyib6UzIwOF4iq8n3xi/iTQ3/nb8\n2bgQwHpq+cHyJLJd9HOGQPayef2wOSVwzuJSSrKjAOAB156v4f7VNBIhZR4C\n4Y3HYogZKFWMrA3iDMzCJScYsXgPbl6ZhOfnBhFaQocENNLFNmh7eOZtmhZj\nWM81PromFGlYos8TbF225+VyPnjbqkD5XiH5IfX5/aK7r1tkq3nwc7bbYSLr\ns09Zb0aAZI6oxwDGE5HWQq+6I9f8vWh+TNe3XhPdh8Uk9MTKm+r4UozBaGYp\nrCyTvD+oEjKtwKCa3iJI2gjFhWtRHPSKIPRapObCTokRMHws8sglND0neyPB\nYb0udCQsp79E9e1uqLZGBc/SK9K8YXJSk/LXnK5a2uUSv4/6TXI9FQ34b6gp\nPS6voh/gx1K3zNQsgTlPCD/T7WV/Ode4YH/+qfGiqeEgKVfMwFoQ7WOqRqeJ\nocn3iSyHy9uu6EGjhaTJKyTLY9ipErLbc+KbPDcoYKb6yVCB4LDf8LWryVOB\nGQ6wP/H/D+5MLNIo9pWAfWdYQ122w6bR50voKP6F5WFjpyIPtaf3p+1QuB8d\n8HWS\r\n=ntAZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1B8Z7+fiVd58/wrSqvR1H4s9NQWRcvc47kZAbpECAlAiAy6P6lILOfdyD4IBNMaFdatZco5feEkSx8VahPFOe4cA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0-canary.0875e898.0_1619818063139_0.1572778722661663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-switch","version":"0.21.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/mwc-ripple":"^0.21.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-bUXkbjMF16xcYFxcBxAcB9wRcVnDORzVyAuEyS5oPZT6Lt+wW/7s5jqWrbxTI9PK38zyKC6dcTrybVJAIss/bg==","shasum":"35c764cf822084fa7f627a67e4cfc2863fd02951","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.21.0.tgz","fileCount":13,"unpackedSize":44654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmQCRA9TVsSAnZWagAAlg4P/2UccnlVlIuXGF1ydsft\nhxybicJvYuGDt7FzGzeG5XDCjfFTxV2KwHMoQJ+w1lOM18yaZLvNluI1oBju\nmUNbmUw1Rp3X2VT7AdDCqD0ANoMlAo23t4Hfw/tnU72UZsOjVvax1EccpoIl\nTCBLfAXlYizJ5JbHwd8gyC1yuYyr0LQab8g72Ae/j/1xADAOg8L1zPkj7/RX\nrZ+d3aNRbNNWh3FB+EG5mxhGZ3Qhc6T/l+Ih0c7pG522HVCoDRo5Jls5mlBm\ntKQmSHzWGH+HT6RnJtHJolsoVSDumg3XBzggbPD79Wx0haSg9hYUahPQlboB\nbwfh06xs5O7u6d+I+yNgBwReV69YjQn8y4SySTp83ISRvd7SOWjEtKGLpAr7\nq0VAijdMyfsSukzM2ldWXQQSkSHrvt3KVtt0MGD9wSCW6uFMZPo3N9ywVfra\njtOxX3T+xoVpIMR2mYqG8Eht/X38uQEMg2lSGhGQRvCa7mi2B3fvX0KhbUSr\n6JP7IqnM7NRKSGp2lmTMAl3pZ7nIhEhNcWqo3aD1M/i3HWnKc2BkF31UcvX6\nLHhcjy/JOnsa1YBhKJRCmOpqeyQrKT9UiOYcOTF9UkfCIrLfZSWuLvGur8Si\nZatOP5jl0XEI2L8rwzrNuDQuB7tD5kHvi4DDqtfFcalbMjb1t42pT4zMR444\nxypy\r\n=llGe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0jHUnkSebrEd4BQcugv7WKJhFZ6ZlOh6l2Vu1HCKQ4wIhAKATaIyBMcuPq2l25EWplhslsszikn6UenPh9CjpRPNE"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.21.0_1619827087875_0.5794832557268303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-ripple":"0.22.0-canary.8f1e7e1b.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/OsvjjLE4MlJYo5bzhVwc1CQNeCFvEKRhwRAlUP+ahrJhpwBK6objBXJn8MEJYFRNUGAd8yi2E/2N+4Ra7x3MA==","shasum":"420a3e3193c38065c2d5504bed7763a5b4d01fb8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtKCRA9TVsSAnZWagAAzlYP/3SAYCbugGGqFjPAB6w/\nOZgCk2QLDwm9u7ZlEQce6GJYaEjShZpGqzaRndQC+XWA8FmLcxczJ//5xf+h\njVX49Wk3kGRh5UDFf5ZzrNHmlLjakJ95zq1EHuFK0+4s+Q2ZIsPJ/IbYRb0L\nOZJoF6S9wp1227+SyjPM/JBCbcvy6TfIzJQOE0SJG6G4YNvFWl733BtqLPJf\nvE+ZKiMiJLIZB5IXCm2r3wp/6Aq7PKWJufWVW092cISxeMpFIqXt3x30QefE\nLxXUCKkAfRr8iCv2WuohlUgvOnPoiqy/J/OOJ41J0AUqwSeOMutxO/WmrQTZ\ntai8S8C5Dg+Tq/z0PgA5p2Hm5RDjiMGeu21JmXJUhDTXkej9bzSpvztrC/oE\ne0ZREt1sK3JvlE3YhwfiVGMmi2sk9Esn9YkWSy/bsd43smbD2/zA6psC3SeJ\nbI8SNu8u9x88nIl2lO//xpJ9UXacrElcoitummPV3JADsQNa8HI2qAI78i4/\ntZOveTsSREWHBAMHY+ddaIg16eNhZy6TuIRuUd2v2QppmeYG0MUzqeTj12ea\n+zJbNtavC8Bw+rTmsau8vaPahYgxwxfsAhMIVXBEhHPkbVfvh+PBJa7rMYtp\nvUqg2YLwflD3qimGkjNkaGKj0uXpVA264wShYAuBcESL3wHwkfDK4xLn6/FC\nSpSb\r\n=PMc3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy25LmIKvhVHv811ViNXKWvn38YOBHHwKY1Frqk/ufyAIgFR1nILG7+IBjW0O1zoYfmSTeKNyC4adDKb7jYWG8aPQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.8f1e7e1b.0_1619827529713_0.38402990585901575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.deb0e792.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-ripple":"0.22.0-canary.deb0e792.0","@material/switch":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ekF5iPuPJi5z6Du/4CEY6YsubpSnJ3UTc1A01/y3btacM+eVMCSKobrPXHeA4arfp8WS7/hEAkgw5Rq0IjBNgg==","shasum":"7386774e951115719a4007689bf57fb1aebb7181","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxkCRA9TVsSAnZWagAA16AP/il1z1Tn7Idd5y9mDRpL\nBKKP3/S3Xv7NtpXBYo9mlZv3+6UTx6+X1/0kheblZaTOksm8AlxUjvKckWgR\nMqykjnTzHeG/RPEe9q3WP1Eg7XKFcIwwrvZbCxDq4MFqQQHVZdTIRrNIRLRh\naV9uD9kVAnPc00cLU/MBwY7zPx5BsdBl+ZYj15u4JwNpKBz4Ya7HzveIYttQ\ndN8HT4vKRpcCuz4BSoGVqUWSY80yLG+nFditDKh6PIE4XxobvHQreF3mVwxW\nI+Tjiv/IJVFTtbX49YIw/YntA346a/j67see8RffgT+z8qxAxviV76dnnZtM\nJwpAENB7VbkKeqLMVirqRjkFmuJ+yzG2cxYidjk+HV4TMNwQcc7kCT9Nsu8z\nvyKOnVnPmfWH/M6CDSoUUVPVT2inbudBNp3XJxlzyIqXuRdYPrSZMxahSUSx\n2o+SzUkTxddeXjONjPFZ6ae124YTCTZyFqn8HG1rBPYxSw0aOkeIv+KEqrGL\n+80FVjnF2RZ91uh5INXVc8J7jZbieV+z5+mJOqeBocUx0l7sb1vhKvO/PhqZ\n+Zh5mZiL4LgyYNnPy5MYFIjEI32D2ReGsWLieZaPI1UJrS0OnGRex1wrCyDf\n3uowmak7Jz6XqALwcgtUGaXdqIRksS1O8QXouzEo+ziv695Zk6COnEXMpFQ9\n66vk\r\n=tJQd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjRF1JezHBVOHkc9Ce+mpKXNSg+QhIgsKzmM9LMw9JOQIgFHWCxFKSiDBoBYcdjrDAi20jcYTvYxLdN4hpbh8tyn4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.deb0e792.0_1620077667849_0.13509211956236578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.a3ff615f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-ripple":"0.22.0-canary.a3ff615f.0","@material/switch":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474836ad0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZvhDs/dkadvIqqoTFqXRyd/fUp7LOtOTsvYuC7GFvsgMJ73r5AGgCk++O0U+s91w/zh8IlWoJGIMMHXPgZuzBw==","shasum":"0f311879e363755515e8780fb30b63cfb718fce1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpQCRA9TVsSAnZWagAA5gwP/RzrCKCJV6WhVn+z1Uta\nnSrjrsdQHrsqVR3vQ1AMLovSHVErVvkwgD+b/g4Vq7WQlE6Gv32+P6rzJYu9\nnD1zJ2Wz5lOfRwAuWppIox2IQaCh1m1HIJeSXQSfUGVfZ9xvMox2RvXjI8/2\nnomWUeRPIRbLH7ypFwvLBdtENp5zVCQowUlwIAMgX7B1jLo5L++l8uDTwi0g\nUbgdLK+3YvMLNREbBAjjaRL/IukuW3FmbTFujf3R/9nUza3DO4fR+PWA4jN1\nLn39z5DtOqVmEbSFESjr/WQYJCfQNMXe5fzpJxyysWZYU64E34EnNstE26zz\nAHkJDMpOltVutJlQ94yiZ9aX7tJY0UzxfuhGuche1opnhCV9D+g6SmzHfe+s\nOFmZtnGwYl1hAgGVeuD/XuvQRvH08XAVofyss2TYBEPP2QvdjuLRPxkWyMAC\nZPMe6OuoTXnESec6igg8I4Pg3555UJ+TC/O4xG4KKNxi4nXDnrZLvqzktjoU\ntuXsskVoLzUSUk/4kkGktiyJxzYNaZ360Ko0Z1sbkhRJIFiNPyJZPuE60dNh\nXYe8T3bnIYHhQBcUzMUgDOBYPJFSYVSMfzpWQddeQSeGnMF2qfcaTHwh9sp6\ndKJEGX2A0NFBiugK7nCqOWDxx8bm3jeMjpsE7ic8NKOJ+FfJrt1f1nVZFlMt\nKOPN\r\n=9sYj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDElgl12FJ9xLhHxgjlChH2nbtGfECqzfshM21gti4dnwIgMiqPTYGo/d+n3v6V+KUnDTr/lp47DXDi+UU19Xnbg+M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.a3ff615f.0_1620081232268_0.4100659547480183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.948ccfb5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-ripple":"0.22.0-canary.948ccfb5.0","@material/switch":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474836ad0.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YlrgKYl5BgC87GPOzSzOuxE24fkfVIuWU//D0VzbC9Y9NzyyV2E5U4jwtid+P73sHY2VfViSK1aBQGAVc4PiPg==","shasum":"8f259fdccbad586377bac15f894e35beaa8f2872","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEOCRA9TVsSAnZWagAAzqkP/A2ADevLuCfWOq/6zgkW\nfr0P4RVHXmlq1pd4uPqQzybb6yDuVCS+hrbdZ0z+nYstoaRCgmB5fUwribOa\nhdRJ1T09CAQPqnIxy0LIh6PBfs6cg1wvbcEb5LUB/wdfReW3Wlgzy+pQJe2K\nLmW3cdpi5F7YYFqU04tYtgE4hJBLTda2UDDaJoDOWwcKwXaNubiPLBERDQE2\n92Xq37tli6etzSZjJCYU7JTFk+bcxshMSEkB28a9I0MFApFXvFdXe1ZBUPAU\nUwU+9MxRFVy/TMjC0GizJ+evqCbNNS2u/WA4h3eOlKELPm3n7iGCbexvAojj\nTOuXcAaR96VYpw3iqvW7DA94JkauHUWrtkdu36RYutPEec1qe1py32RkqCd7\n6SqAoa6NirC3XSY1lHa/TbZVhvvrof+6y6xM/l3v82cfigBp07Tbmod05zhZ\nYRS5lrRcArJU83bTWGwbQm5Ub9U1u0znrOwBgSoWBL6jl0A+1VwtiLmdtzx7\nDBNGo4B2S32eOk9W/xJTAPEehlIv0UWR9HEcQ391CGeZEd9AOB87bJIO0A62\nvDbm8G+1FBn/39wwMHk/kiBQidKVnYpro1i9tCiHeRAzwIj1oKH2a0rqa4Ks\niqpPH8jrVhbzxUdYjnfiXoHSMt2uHH8p31HcQwujyeQCtimxK45CdxGgMNbX\n3yU+\r\n=Vspf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNlYZw9MTZejteFc4UAiDusi3dSXhWwI+n6IkvZ/LHnQIgOfXFtqqBoiajCpR0yauBU58u+UT0sIm8RvM0JhZ2TxQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.948ccfb5.0_1620087054328_0.17842639055200515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.9f8337d7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-ripple":"0.22.0-canary.9f8337d7.0","@material/switch":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.be999eb08.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LcrAxUcydODdyjaUhgJQ3Ld3IVdZmI2OLFRyyL96Kah361s1wW9hiOmZsUU3ZuSUx37XUfRXUZPNuDlBxPDZOA==","shasum":"a8b7b8ef8c942200ca859b640feb22aa7d4c1549","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRWCRA9TVsSAnZWagAAiTQQAISVrq3KTFbrPCLW95Ab\nJyacFoRR/XU1MWHnYq6FlqwQ6ygDbHYBjVke83Q8DCb7Cm2SlkZe3DokXX1W\n6o0fbgx+T8nT8S2tgBUCQvYmECX7jvOX9YCSy2Aubiym9D6lehVJGHMREvY1\n+g/POnuciQXVDuEk7qnbVtli+0f2L9AbHKdobpb9fVckfpT/rrvAr0jDppbt\nzE9ku4OlrqgLHb6WZXm5Ie8B1e+VYCnUFJphq3X6p74WXJ0p622BJp8yExWZ\nqxRWF8hukP0UH4+h7W4rXaa0mA0OFyXRN12wp3bZDEE6VdzEuojtn5PkaexT\nfSZXDdoPF4ToTD7eeymZt5Yq/F1aMhHeXPgG+q5DQwALNpCv+IBJW8pC9Z98\npkOt9m395oPoALCfNd+PrFdF1J/q1R4sY2MnOPFOvvg+Rz7tdWF0znqOKUUu\n7VlKzYHNmUXeb8G/ACwczjFiSYPr4DMS7hIfrdEITG2afI/EUizOK+7VgwEe\nCGf2BBGYko5qlHPl3R/vEnTp8KvMBYKnP5go+tbNruIbltmnY5+Ue46jvfbI\n6RiNDYKeLexe5/yRyb9VrXLJ9MnnYs21Lu6QgAylT5Q/ADUSi7L9D7ewVI/k\n2tjnjjGlwUf9dOe7n3XpJhQkybsBN3I37phUO7hy7TTlbnkHZUU5+pQ3+m/t\nzzfH\r\n=/EWY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEearjZ1v5/947OKmlIxaK5668XkbY3fCj53ittPG7xMAiEA9lhSOvYbCKdW5S5KjNXEEdKD3fLPeNiiNf2zW4TxcNQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.9f8337d7.0_1620153430102_0.012392623556100268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.5813480a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-ripple":"0.22.0-canary.5813480a.0","@material/switch":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.055d4f10a.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nlc8U31Hi0DMcu9p0GTuUvCGPvjhZ0znxX5ias2nmtJtiYQIUtjc0EB5cEnBlMVSVlIwI8WfX5XJ6B8rsnCb8Q==","shasum":"236a0daa27315dede0855201a4ec2ed38e2db078","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMjCRA9TVsSAnZWagAA4OMQAI50HRliLyh7Vs55IPQ4\nzwZNDkrTDnv8e7uAyIOD8Aei0vostXDNxi9aj3RULIsKOF1HOzo8nYtJBEqe\nC3J7cTAcIwEs+FhSFcGPtJbEQAX4Q/gqGszWoix/FWC7qFKfHNnW5NEL0Gmn\nY2mbHO3cwvC/WPis+BxUU6pt6fhu3Ix6sTXbnmjGayV4qocLWknl6mEDcmN0\nv4MwC84vx94WffA9k0iTwM7kHbYJyz7LDZYQz1svKlrWXo10mgPndWUSACy2\nWyo9n+sNJ/haKV2CAqELMhjSKJEMcK4GYAPguDhjHJUUVXCXPjohc4mJk6N7\nmDqPx/qzFfZ8ugAkI5uMzJnFDsHHc3ZqcaXNQiJZNOM5mCB3jVUKZmK+OEDM\n/ynjf7aBmgh8TVv6UzMv4oEth0J0S1jcaNCuFfGOqfWAm2J2JV6n7KX7mRs6\nxlqnY1gcI7V0IG3NJBSG/W7YxK43i1MB5hREv+Js4nj0aCxBesjLaPU24xPh\np24rUku/Omd2bFKX7UOUEPakL9isbcuy1mB/ie8avx8geQTFI05uIUSb6NdY\n8C3n9QuKUBFI0oBmRpqdX3PmCJKNOx5GO9i8L4BG+ohiB1lKQTIICnt5SMRr\n706aBY2wpJ13IuXXhiGbHkwg9wqTcXHsT3JadcUITgs2XZ9QbcTwppHTPdVm\njUfv\r\n=U7ih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7f4e6uRDWHko38D7Elk4eyeUe33sjdRoYtcJgn91LyAiA4nEbay3Yjo4hjDdHZbuMugX20fHdzWvDj4uyqQTSe5w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.5813480a.0_1620239139197_0.2708961181411276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-ripple":"0.22.0-canary.ab7fc1bf.0","@material/switch":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.03f525f9f.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ckuifVD5gKws/LLSPwsfy5E+GylREHJ27aVjz0T/bWd5jcxUoWt76z/6P3MY9xrgYaLGJVT5jrGdndLM65R6gQ==","shasum":"b343dbbdcf316df2e5a97384b8e33f564fccf794","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6GCRA9TVsSAnZWagAAp1gP/AjnVFpDstkZS5rIgA/h\nkoHO21ex+efnIGCQPigx4L0rEIhbDbYw7Ns7NMALQvf8kUrtxY4TuLjMFW5a\nN5Q+r/xNqWZS2fsII6ifpvjj9/bIz+Y2/kjdMNXDICVw1M0QS3wlaWw2XQIu\ny8aGAk+SxsRPsMwar26J/hGS5sRr9Sb5Mrv/IiSvQup7WyPuQWOqEqJ2JSSd\nSpnTYHnjqDXSzHETxhky6BhgGPImu2X8k68ywq3tq2/AxR7N/DoJZivBis5E\nkoMHaS1sabvpL35Nz83t1MmQObF52UQHaSYvLycqU+6ihBo3oxSSXwbkwSKS\nmHNQhZOS6Q0lqTohv4Jm80sID5Cg6C34DC8WMfkn79w/QlBerGfhCmqC/IKH\n2SDe0XM1WES4eXI4SfhHDjOu7CJO9/DQ2Aiungi7kyFaIU/u7f4OE9dz22Xh\nunNnEr+hFUIh4u30ebIDPw/EdVpM8NtIBzae/FjFb6DcA1vK18MuMS2TOkW/\nqmGcpVjObNiLxUFl0/Rj+gHSuDULVVETtPnbNZtS77Kk0WOKsSD1gCCm2PfI\ngoK6KwKmVnBq+Z/e85mL2qKaN5FhU7SnBZsjLk2XLAsW86zCid/N50LSng5g\neKharfKQvdW9/UOAf9IMmArtrDEr7vSrhrcs4bZQd7FbKUPIYBxSdSIHNUpd\nOINB\r\n=rkB6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEIZEihUNVJ0A4sEGR9fsVMNTWFMSc13+xP3ig01r/W7AiEAuXx49RDMdAxPyhz6T41TSxR+sxXHPvvEuQNfhag2Ob4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.ab7fc1bf.0_1620323974048_0.29502180233132713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.25693d60.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-ripple":"0.22.0-canary.25693d60.0","@material/switch":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CZCfYtZgDNmFUsUB7bGyLkiKcGMOF2qU7vDLa+65gSAfx5dq5wKKBBeSKeit7z8E4j71AiFpRLDpScTB5dCp+Q==","shasum":"15715e88bc49cb7f443c1efdeaa0398d85a67f90","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbd8CRA9TVsSAnZWagAABkgQAIgQvK6zWVW4PldgArcU\nGtiTAAYfleNAIOVg8wo33tKOF0pnCNiDcFvnY43vnZEdR3e++DitWwptMOqQ\npe/jbFPpSUNVqx0q2JBNVUUiGYL7ULkbxepJ1s0UA1jnlwFOkGzk8SQ4HJSH\norzJmKqwyRe0vk+yC28RCWArPZd5207FFqA5f8Pguneqxy5RzNBhzXVNPnWb\n1y3brJWOAoVUtY+bYdAX6IjZ8ia0/2DodT7iPJGnvZw40t+6208mGEHVzcsK\nU6T7HMyneDInyU9kiI6URJuRA9RSlS+UoOkiaXcKgR3AOr5vp+Cy5lxAmEnw\njTeSfoVQmwi8fyk6uYjUTepb8A8hmZozmAA05TaR7W0R4FStjibVq5V+/PMF\njpvrJypsXd8cGVF2WvgCn8EljtTJHpXwLL0/cN73o0s8W92hEe9m60wLW1vk\n7rEfcxxO/U3kuoBVEu91QuOBs9pNMerMpUfjyPuzCXDY1/2Ax+FHHR7xwCDA\n8NSnkM78n9VT+aZxE+5ThJvXpHHgQkNksWeripEOM2ZYjCvOPtC+jOjFc5Cq\n4G0OdOPN6NOBq1e+S/WuKB+zNO7KSZrmVbWNCCLQWhoHaBkby3Hs3Sg5Uw+1\nRxh5av3JxCVGJ48IWxhYFYRJNB/V9L8u6y1yy91TMKvG/opDt5FlrY2eWntQ\n92PM\r\n=8+gt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrYmBPcDkJHhUh7XxVytkk4dn2GVglNLunR4rlGsutiwIgGCSjgZyjMMbyI01nu4T8Me0OZuOlqNe5EQ2sEr2a29Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.25693d60.0_1620424571938_0.057457281115954384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.c497962b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-ripple":"0.22.0-canary.c497962b.0","@material/switch":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9EkrRt5xlBFmOX1eBN7Sz13+itpZfNrUH1pwpwgFTsHdxIODOu/2Ru4fSVYeaJY3uVUzBs0HjoSK+OA+iqS5NQ==","shasum":"c49e9adb423770c4864d0b5a94f160b7d3ad3c4f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0WCRA9TVsSAnZWagAA3m4P/1XzGT4xbqD/rhrUC07h\n/d4StYjbVbZIvuisWFoTsTfgXJMEVxukquzbnJqkb8xFBFNCkL3Y9qlweAQm\n82kwm70riIH2WjubiE/w4sk1m44OhEiWRHAVJtXrrZ4P1B2EAde0et9KaaVL\n70qg8e/Z8vmQdRlgjLpt9zYntB73VjR0f83dL1yg7UAqJIl1AyV83pfT0qCx\n8VJHvSF9A6UIyyc3z/hqu62pSHZWGnVxT/LVF9Th8HQTRneKJACLryzVpkip\nZI46NwBTBpRl+VwSpSvUEeN/67dArzfforh7AUA82vnsC+hKbJdWfGrhGlR9\nva/fON8+atHo+1477tySSyYt1mfBpd0wLe8MLdbER0XbnkP0aS3Ib/j7lfd/\nGeBNfxgDJaQvDBbhkbTr2atcmUtHYsYo8/lHX8v6Oa8nkPdXUKQfze2aiOnG\nkQaigOmSFDyx9oiEIZHqcKoaelk2LSW7e8fBaEGr2hzvyq9/uKDf7q2/jeuz\nKrZOGttNLy5pq/0qsRMjifRQHW+kXs3OHsKyb8/dpeUR0nAn/XboVcKMPsX6\n76TP6RYPTAzkcdMUKaQezjodD2cBhZSyzV9O7Dfij4An++Mag8IM9IWrz+rv\nAaIFeLb+W+034x0AUewoWOjS4qfPN4bT6BTViDlDsXfpt3F8IlnepAJthhuT\nj52m\r\n=fcP6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMdxFX9jHZbZ+myTXVb35wKe2Brtt+KA4yhrZnZAHXQQIgewXwTDBaWieZ+j0iUqnbVCghuf4YfiJUioOWpYO2COY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.c497962b.0_1620426006359_0.06773968448188272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.e300688e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-ripple":"0.22.0-canary.e300688e.0","@material/switch":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wBoB+G48rxrGlOQF1qK8PnaEEJBMFOFhnzQUoFM2TbvOhphmST89x7kI+LzL7FzOhHnF9Ty251HpKzU/9fnFMQ==","shasum":"a70302e74279cbab12528922f6ffef5525abdfe5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":44706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4iCRA9TVsSAnZWagAAjxcP/0t7MSEWe4Q2B/RagnaS\nGMg1MR6WnclYUunGYdN5ccHk2+XA4ynHgI27LUFlV/iJP9QMgmw/q0A7DYZc\nrxmIRMs57ukxITyUTkervhEGGiC3l/JjPktnMMArNVVZ8rXhFGnTseX2yi5S\ntgNysMRoac26N0lpTC9+VyQVRVqVZBu9TnITuFC9aApqFoyIqGAK1BV26zgx\ng5mhD0dTO8GhchPFDOEDo7UADZVy8Iy2oAvT9u2fvTUE5s041OpxQVSj7OJg\n3JTecCeKV9yve8ZRHWuZPq/QJXPvF67CheAuQ/JCF/ggIBexaoIgiqoxAyZj\nxwvIUx11zy5A2Tvyq8ZuRgHOcwy8TUxTYxtrtTFjYBQZqzaB0PV/L06VGCXi\nGzeG+HrONJVVOzLi922OtKx3xG7HLYyr28j5KWjHgFSkyhp5QtkQxyprcA5h\njnxQlQzT9VtoDwmRm2xuh0iIIc8vh5b+PV28tgi/Mrch7isgwKA71FP25a9O\n9UeiZB/repZzKqonAw3pdJh2vvTicpGFpHA7Eps9EEOKCEBE+gQwP4JwXyUb\npzjDrDzQ6fg3q6vvraS/75Ivl8eTSL9ulB9RjbffGVV47KG2h4Mk9wePyMJ1\nptfmv4XhZ4TG/1t9g7Al/gpFYmekjQF8k5aa28RIl8QDHIXYYEkBYMlHg4NT\nMwCz\r\n=ljM3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCen7fHhQhpslOA9QAApadRNxoggyDRwBCB8QCJVY47pQIhAOur/ts6MF/gBuqgmVTpygZqqfeLObGvr5+UpfEAY7pI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.e300688e.0_1620426273885_0.33673799556923134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.d70287f2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-ripple":"0.22.0-canary.d70287f2.0","@material/switch":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9K5/WQ2+DcjgOkdHujo9hbiCM8Z23md21BQRWeU3Ap0CCzqcV6h1fQ0EZCoZA/3nmHnXYN27WwUdyqs2YQYd8Q==","shasum":"e43a3694aa72c83cea0b42716447cfc6fe90ad69","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":44657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmaCRA9TVsSAnZWagAAWi4P/RVHSPixIQrZYWFo2vsq\nUDNlbhMtIYA3WtJEP5oO2LGj+isHDkYrxFVhPg8LArzaSHUJElND1FapToMl\nAwMZ/LovHBw7VEI+LBEK8CNtnw0CCn2TfasRagxfpHO5Q/k/c9TYqKAjZWII\n0iEFlw3/PwiC78wszrI98r5uCV91SjanIl74vdUW/N9PC3lf6VdQsr4vuv7t\n5KSSSzJ8a0bsHpa18fptTgo0e2JYhxKAp3zMyyrhhmMSiu2Vzb+VlvfsT+Yn\ngFkykAGROvHVOTSVMJV0qylxq2VbtiGN2+UBE1agu3z03vsCjXT/lbdYPSAL\nOU8JNKQHwjkJF9yCcJj+f3GT95nCrwDvpyiHiOKguDjzPLKAQESn11aLPXnW\nEvMuSnZ4RGLwiui9RrISj9hwQ8lGTfbM/ClpUl4YX00lFjza7bina9w1RFaQ\nXcXQzV118eF+wgEGx/uwXsVF166agi97uWiO7izLktIvNxujYA0KgDo2HFYE\nvXmbPUq4DaDk2XP8aVgxNhKRyecbLOYStK9QqUmPTPyOfmtRBH2mzDFhyk4N\n2s7CKLMK3Ub/lX9D/Sh0xn4ZvhwCwBdGJYwdzJInIxoKkKdjQUb4TON4IiSK\nhLOFMNLm4sPl6HBj9eq13uaap0yv0F2QiZPi0Oa4K8k5zTbTcoQ8xt47+gcs\nbZv8\r\n=XY6p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3rSUeM38z+gSDhIxWqSNULoHWBxy5zNK4gMa8ykWU0AiBFnqI4MLnSWG66mg3N+v9ual/8Vwx6YWvmqy8P5+reYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.d70287f2.0_1620674970060_0.3114857615756883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.02e841b2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-ripple":"0.22.0-canary.02e841b2.0","@material/switch":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cYanqFeok7McQZUUumtFjbhi6eIbrNnNb4jsLqXOuMjGD3sv79fzC2Eyc7Ef7hM267VBFArnA+szsDZeMGTPDw==","shasum":"66f4f7631a4712aedeceef3e505b04c8f7b036b3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":44657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjkCRA9TVsSAnZWagAAWb8P/j+8JajYOxNtQrnVGQgs\n9lGUQn/oAGA1owIIt+5pAlYomdJ+esS3dLdPSqYTtadk2NOxdCAOGMiKa94i\nmLnnbbPuZD0kZKhAge71hm1d2HxOOBA0/11Bqaig8aZbq8aVydPdyEXqSv27\njRtMG8Vv9+nT0y+nDbSU2tWukpzdQcxuYXLvcWlEUYoX3Oq6rT1mc6DCo5xo\nztHrOSe/1owwhZ2sQey8aNVIcyoCVR21U5kn4wTFtoAtKPpqaXj6PtmG6qN9\nC9Z2wToBSYjfEGYlzug1BnE9FuJUKvzCVKiu03sCMgUXLy1eFbks14rov6bq\npFyUJBw+ojB+dWtiLnD+0xyTHRKIpYFY83Qm23qoAi9nS9m79tgcoNr/J+lI\nhQ7CgAmOiCYVCwYHSC0aup7CRpM63K2tNn9C9bHKBEeEca4u961edbLvnGd+\n9e3UsMk7WaiS3E54J4epbwXrW5MkVdSGjziVVBGTH9cTLlkLJbZuZ2x4UvvH\ntbrPEhOii6WkyagUvKpdpQqxLKQk1cv8QCVStnm4K8VaapZcfExcOAc/oPy6\nhmK45ncuVOnKB6P8jCH8noq/XK2dd9grjWpghIjX5mTxF8lgDTtONBev33Cb\nCe1wfrVWQ+Tk1TK2TL9n4CdWBvoBjq0LqpZvRDAHHa3VKsMjnh1Ng9XjOECs\n3JNg\r\n=to8j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2wH9ZsOGcEkaT2URlvolceP5rXFGtK2ARPcBNwj5bdQIhAJpnyqo1tXMKcuyBfGvwuwRm6RGTw03/9u5QtjHyZ3Jh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.02e841b2.0_1620678884153_0.8972886217853107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.badda2f0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-ripple":"0.22.0-canary.badda2f0.0","@material/switch":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rZUI77TNB1+HT0HXnCu+uUrvj+jjl+mA3m2+xy+TuIKM+gt8kmllVQnJa0i6dWO8T8IHRJ3+yxIKnrYeLoW3pg==","shasum":"a066c67feb88dca1680705d7a9a2c2a34589fc50","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":44657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEqCRA9TVsSAnZWagAAhV8P/iSd0j/PHcFu2RVvrFYE\nxtQ5qm7GO5wtS05+3i2yhs3j8BH60SZ4CfVIJ4t2705OLsU3809FOtfPPyn2\nvBbOOjslLkO+GACHUJvezZakE1wipKAGEu5rrOxloESYx4yt+Huucxj7GIPX\nrn17Bt7t7lrpuYaknMAaR7j+DaVdHy/mEOmWmMy46wlszROlVbHmeFfwMY6J\nvSju/Hfx9QJJj3RblStoXsizQvyanz4B3gXMdLooftCMH13sSb5biibIDqZ0\nxU6OLcQePtkgNfnUORDRTRr6mqmvGgm3d2zTM46enpyJt8lvEye0wxnIKchP\nMp6ZMHXZLcpspDTikg2X6nfL7/f1U33yYGYWItRXc5vgH8R3QDwEsjKsTWGu\nRKFspFxp/mtWzUyqRpIg0a0p6UrB33LylD55t1ye6o6r32dIBAEv1u+LC1gD\ngliB+XgHWr5OGUCq+FLZ5opaQnxAhhq9RzIRdtmOh8oVTBtoUXQqIfPYO2Ve\nPmg0xbm/Rr/6EY09OTIKg1tgb5qKnl8CEwn7pnzJF4/9mddeIIh3GVL+gYgJ\nVIRaYVa2B4desq80798myXoaLmmYz1To/w7zT6ZmZKAC/aGLFgz+Vb12uqTm\naIe6ZwBrzSfan+HTXrdt0JJvEqZjmeVjTMZtIktpk942uoEVyOsrwUNQXXgF\nGAFy\r\n=9TcU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDbPNW3FNQZ2cpbsxvnRib2JsFJbVTSJjZ7IpWI+DSzgIhAIijTkdiE1uOnK/tGrF588HbRSPQk0kC8IygAwFqaTg3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.badda2f0.0_1620693289613_0.7807874046522296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.004aca62.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-ripple":"0.22.0-canary.004aca62.0","@material/switch":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-adixA5FIQN1szTbHS1YifgDNL58/HvFHtCpd+ts4t7EQuqkFbrdv0y5FdAw3EwXXT8kBsB9aLT8FjPa+qOAM5w==","shasum":"348f49ea153ba4442b9b9f57ad7ea97bf342f46c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":44657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmsepCRA9TVsSAnZWagAATSwP/i0rxZWrb0ZnW8ijgs17\nrG/+8aLV00Xz3ufbLGgIg7QsUdAXgLd4zaEGroCyMEOxWDtuV16vSol6EmBl\nQsf2qkQbBtA1saDwQlqkU+b0jo5lVgpoENlK4TyYySgQeH5OaQA8Sc1Bvheq\nLWHad2rgHfF3LSBcG3w0BdT0s/YKtfcJiZU494i6XTvkPcKcSzVsqby+4vwn\ngcghAe5gGrE8PZyxAqJAgBJhU1Lys5Ck7XHm+L4SoBmQXlcnZe8M+EFhOa5m\nyMu6s6lx3cnps3XebtbH3266BDdLHVeqP56/5HdmDeJ4YxvWKbXD7QMgtdzI\niLhzdx1G/SySfDfVvR/AyY8Gy8TVUaeXfyiFCPaKLCY8QyNgYL1g6lfyiwqw\ncuwszjsa/CVutAXW0iSk3b5hK2mjIW8MzfNNXnshzTR3GTuYRgEkZbjCvQjW\nLUkU7RoxxWAESmrEt6efSBEUz1U+rWb4uMD8lxAWbHNAQE9ChS2FS1PQEOKj\nmjdA3CrommqpTcnjvASN42eaFozj7f4XZpoBF1k7lTHLPe4EGEfrb5nq/Kvy\nLjJq7VtyPGxnqYBNLxmxE00o5U2kyrX8GhSeu8iLXWT+JcIo28gzdb1JHkq5\nzvj86TL7nep7ukJViO/hfEgvENIkmfBR7ZP+hdruDYO9qFbDqyPZitQbsvxW\nb04W\r\n=fvVj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBen0Aw2I8IuhN/oDBqRdSzdyTbeYrvv69RPSn1KEN4bAiBB9K5dRNYMBelYubHKVrhs1emhRmmKkx4k9Jq16hJ54A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.004aca62.0_1620756393179_0.015217261116050151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.4af17446.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-ripple":"0.22.0-canary.4af17446.0","@material/switch":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BOEA1CIAUJeOBZdicbEnyV6CvRs9uniTAaQU5IdVOYpJ+CZf5lm+lzcBvBXebXttC3MjqT70tyrM8EFqg0Zk3A==","shasum":"cf9804265a570b46d5a82e8c2a778c5e22a3f7d6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":44657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtD9CRA9TVsSAnZWagAAaAQP/jOz5tCO/JEowP5+yPIn\n+DWB4cI/OMVOICn+XdUaKm4GCh7SJvCpn8rPtuj0tMMZ3mA5mAmcuFfv3XzR\nxbvnxfnjucZoz0kAAVhHLqTAhKEEpcIOVMRuKIUUIF/IRbQKZ674zrX93ijs\nUUT5OErXZsHFGPFNhV2m5G8YTycHUKtOO38o1/jSl3ea//FlJb9Fjek2wutD\nZ9pZsyP2LSWM0B7XM/flt5GoNLvwBcUllvYS4sTe9lqrvkKruBhjwaVYYl8C\nH8jitTmYuRILoFN+RFsGemurDFiiimPxg7eOi3Bx9F7f9P2yxzr3Z5JUm52B\nA4zw4s5Fdf7HxrsDShLOMjIxbHCKlLM+R7lyg7J3Z5GYb4MczSagdcUIDaed\ntBFeRhufUmZlsxa4udkcRwuYf39i35GVWmfRaTuMMXZxk79oked7WrPl2S4a\nVyQolZYJVk8fu9AeG+fU8ihIrduw7YFFKiAamq+1ThPxX34KTH4QUJZSmFOE\nNn5a6NtRnKbmefsLCmnpoT6oOjmxVUjaOGvQvRWoC2mbMburHgmt9mMfHshj\nH5NwDIxewcM+f+o1+2LE9SgUQfc5Dg/NtOU0tYH7uC0mvrTopHMiXfMKwjr0\nJtp2kI89kHxBAhnGN3zEejMnJ/A/mDH+DLLkX5K3CI0m8Dxw5P3d+TM4PQwJ\nfweb\r\n=aEEy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtKQ/k9X7Z0Lt0qmokec+hnPlmMPHJka8+9u2l1ABcrAIhAMP98HJFL7B/+KdQ5XYtdbGIJccMc7pVWHGMRx+QEy0S"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.4af17446.0_1620758781367_0.7041039999822749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b94d7187.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-ripple":"0.22.0-canary.b94d7187.0","@material/switch":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hPsu2934XeIeLKDpV2DUOc+ytZb/D0wH9SH4hKtUpKveJ6qoFV8iynaZtpZUmbX8dJaq7jqmjuxfoqptyDfSJA==","shasum":"af8a3d4587232cfe27b84ef24c5f723c96e563fd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":44657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJICRA9TVsSAnZWagAAjfMQAItub3WVEPryJrKReV4m\nWOZNPYX6puoJFUZMZnObSbYyKraqHPWLETyEOy5lNaxNG82AYu18h3qLFbaM\nmOzPlUp14SyQ73LjzqKlhzB/cYoKdJm69VLTpCRiUXyhX0144/OyEf1g6c1w\ncswB4jONUgeT1DfPsl/QHZvXpMbq+0EK9E00Mlw/eYU6nLcNuV962wHAFRqI\nqD3ZfImuBfy5hTBqVKDoDjZqdLuaP5RMwPQZykprgeofiKUC9vs1i0nft/Ho\nufXeaHFlc3yiWJfXIfkXeTvTnJ0T9/YuBkKxElItyLhJKDBJdgp8zmF6CYAf\nJN2h21bngJt/iQQNF3U8UqJBznxKT0yAQVYZnbRjCkLyCvnBuN8z9YL+CNBk\ntM6hiSbj5Cn3ndaE8LIbQaKzzTlh+Nd+iMO//dOJMDHtx91aVGrONztAy7cy\nQf7A5ypyYQVkNfS8xpT86ahwJrT6QM9++jmCK/6LkqiL0ypgsiTBa5PyJWSf\nybAIoZcwoutni9AwRqlk+dpDt+loK+22LClJSWv2i0lz1iXUvT4RSyko+Vg5\nZdvFGHlsZQDcY7EFcDhTNGIp3T1qKUOK8u2b+bwwSutMHAYh2W+8TY+nHKd8\nNhoUrrX6sxiogvWyAvQpc1q4tdIoQSU0qHtGL2ELXS8/mZitSRqdwFHkodyE\nGiVe\r\n=AL4p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm8CcIPvzO9oeypa95AczeIGxbZHfFyXKUN9bk0UtOpgIhAIRQOWZKp1syVC2DdiyGmYk3IHM5iMhjPntPBWANCIyH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b94d7187.0_1620759112013_0.7942588206834824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.4021b2f9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-ripple":"0.22.0-canary.4021b2f9.0","@material/switch":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aDd705hLY+HXoRjnd29VrTOmHxnA6nLOVlqS8/b4QoG7pEb61V0gWWbp5ooIzbf/5gP9QYtp6/2AdnUcy/0avA==","shasum":"199edfbc33c9412bbdb76d57c389c74f7a8d2c0a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":44687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFANCRA9TVsSAnZWagAAA+0P/j1FeCDWrNzPEfgd3VW/\nTNJg5QEoHNhcnMNGDM2YLixGHyQ0zzodDMPzMwlMplHMuKSMzYe0F8yyeT1e\n+LVShjtm6gw+sWgqdfj5sRMhJd7yV0u9yPiYT6nDWQqX1nJGnwYbLJB88638\n0hD17e9j0oImMAKQLs04Op/t+xLmgk/3iq6q/vpkHpP4hhHLDgIz/I/ne/8+\nY1Hg9STVxrGOrvDu07g6n++eaIU9QHob25p/hDIJLwI+MihAWfp9ThU+OcXk\nP0vYXqQvaXnJja4xC6wzs7Ve0VH88s5qx3EasFb9bJ+4AcXNbZm3WzH0o9zy\nnUBCm/qFED59nonBMpuFOapBV8dxW2CXAHSmCRO4/xqKJz0CfZDYmfMCrT1A\n3VMUdLXSboTxat0B3w2QyTCS3woM79zBrsWxrAvEZ/0ydrzl+Kda41QMSd7C\ntkdPHxOlyHCkQLwz/2HAuIGyicUXWb+BHOgv6svFpCChuX6TAVEerICJEwsv\nEoda347SexHcwLLX2qcwmymY/8W7yPzGkySlXCOpRLpVozlMFW2nyGD31YDe\n2dhAr5LVQq5G3RmgMXOj7fc2twpd/vkFm+0Czm72ySV2a6vX85yDj7rtPgel\nhliHWhiSrguJ5+UXG8+ALS68zfuCyHM6GGvGgzcNH3n2Me0eQCU0vyjk4U5S\nAe05\r\n=b7ra\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH7RAjTqc0nuToTU6keBYBnmtFoEEBClxCwfV7FLSmNQIgBOD4q7HEsaIZ41MkSdJQsqWvqt7pSir13YMidylHyOg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.4021b2f9.0_1620856845194_0.7759071850588153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.6a5956a3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-ripple":"0.22.0-canary.6a5956a3.0","@material/switch":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LUZRKho00trqGPuuaRYDjfr79AtuzV9YqTLw/hZ9Ntxt1+1qwrJ+XFlm3xwG/ZrvAZnlfGoCm1CQJZJrnbkYuA==","shasum":"4644c09a0a89580d953436cdbebc2e3cbb57dc97","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":44687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQACRA9TVsSAnZWagAAn9AP/jKIoftCfG44EmYgwRwE\nccLGWNJ88l0Z9sEvhRYMwQD9eVXOwMKdDfTMPVbfBwgRC4StRlhNQlj1UGWm\nwam5qC8pg5oxtAefj7i1b65bdo7paHJwVvVWlxFlcamfJmrkwLt9FpqEbLZ7\nmSnhIlJjh7Y5915fmgZOKmYlVFD6nhWFLXY+v5iuBhCPXHGTP8y3Wqqz7F3y\n7N3zmj5DG3I+iqqm0UY+tthlSds+0JX5yR8Fz7eCmKKzHYVAkWybCxPK+F6Q\nvbuXORrMmmH4dm3eqjI2A0NCxQI9F2RqSvtioUwdsPnxDiB7UXCBTA5yC8SV\n7ePrfBuJXoSNZr4gjAS91T70Y0UUj05zAnGzp1aO6elBYy0tWwjZhraNakR6\npb8kz+erZXSbp2gMfUq9qimjXdl0XvQ3es7K79Z6QUPFEJxQrUB6/8Zi6YE8\n5zkINYQ+xwfE8FrQa8vfTIXeHLRF3NlPfgl1xJ7z8MDNp3R+/d8NtPJvB0q2\nycuYJrMVxqCwHpBP/uCdEP+c5dd9rXO96dCYEFLMFgagqcC1LRQQy8Lz7HCG\n8ZdnlKEtVZK2J59eFgfcljPmFot69uo9OQEbJYJJaUY2Tpe0OWJTgPudCGAc\nm41IatGGk+RLEK02sOAQfUBm2mgN+Kir1JVtk/ALKs+IIuwlZg9UxsFDMPU+\nfM0m\r\n=eyza\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEb3ium5UPtqXGeim3EXgsfwH1RXmL+omLBvuC7mkWYUAiEAhF+vIjKNLuACjk/F4A1zePIORGt2id5aSoz/cOjs8n0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.6a5956a3.0_1620857856481_0.4740651151946973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-ripple":"0.22.0-canary.b6e8a74b.0","@material/switch":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2HDPJ98IEFWwQBM2P4HDwRtwHi56R2H8dBZqv7d+eqcwOAHaxZX7hFqQq/3vIKE13ykY2LCu3Gr63oYwohhDbw==","shasum":"d75ee28ae950d6fbbc17e9f9713bd9abb0cdd27d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":44687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7JCRA9TVsSAnZWagAA2i4P+wVhTLbUEp7BGufNGfDD\nAG3UlFP+dPNDwBbIL85UYXqbisMVj8OSkXYg2O9O0TeWDi5DAFH+4uqdDvqS\ngw+x4SXBZCpFQsFksCsX69dYrcwIEV2ey2byvEEftDQApS8bKVjGSWlxztFF\nwXCa43qnwkAoL2I9T9pV2s7aSbWsOkWuyssd1I2p3EHTBzp+mRZvGLEoOMPE\nGdHiyIRrHmoClZZkZUAxMDGq+nScoymNe3bim7p4TPWKDoKYt7jYHYOmMz99\ndDx6xaqlVfMDzHwj+agkKZtA4Tn7EXS3dmnl8R7piOh2GMdwvR/uoeFmtlZg\npOCUt2jj9s0CNyuITtBmvCpM1jcw4ghNhMkBScv+i1g0H9Aj/RwHnGbRe6XD\nqX0HT/cjkNKK1kYNuRXnt5IZtNPik/DI6PrkWoBu/2sJ3e8u4WolOsFT6I3Z\ni5BmoDTVTmwPmvQ1Q1kNQbkAzmO01x7ipeO+doDXrC8lcU1Z+/t03DF4NvT2\n/CtnxvKWs8cGK7k52JDoqxI+Y4eCaJK3Ytn8KPGH2YpTzm72bs5AvRd1ifSI\nbNSJOJ9oZbVEKDd65C2SfxcPfTjA7VZz8v9VkBDwx+k3Z2i5PnlOBhRaueG8\ngHdMb5oGW1z5kHZm2nXozTSdMHiDr+UBGXDUIAup+CI013B0vNSf2/P+g2Ze\nCdUQ\r\n=VzK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBucGe/Pk11gdm6TK4Sph+7+eloSdtMemqBchMzhCC9UAiEA80r65H9epNHDvb/Dj96MmG6i4dX+5TsIM3lBDtGNvao="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b6e8a74b.0_1620860616858_0.7114797998468114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.c94e1030.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-ripple":"0.22.0-canary.c94e1030.0","@material/switch":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lcBmpB/WjG/lnz/QHap5QkasCjIVvr+HLS4dgMKvomUQ9Q7+7tyDwtmuOnyO3aRZvAvAOC1ulFfBcdeEDswTKQ==","shasum":"aab8173b8f8aea18ebe25479d5d309ec0f33f0e5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":44687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAnCRA9TVsSAnZWagAAnmcQAJZLELXqMil45wWbGS41\n0LvXocWz4rOfg7tmr5zUewQeSe+xmhtCC3g0e8gPx9Kl43SFxPIMEzfrqQ7Z\nZ7oN4XwuN5q/vuY2suomJX0y2uSSjRy13MAMqNxDfKVFEgGXHEkDbmQgF/Nd\nT3id7bR5wV/9K8xksSLzUXZPnwphijMRSf7x3F7TQIOe04RaBEzlSQuIuGHD\nSJv6bmyek23TIHttH1Gkn6ZDTV+LeNXsU+Mp/s6uibzykfay0EgR14OccZZN\nw1Y/7+4M+kI2WQWs+1aUzqAhBHbg58RWNYyBe4AhTqKWaCRq49XSpHBCQEW+\nSJSuavk25Aj833z4xlWFBHqIAVGJG2NeCnQTbrBFc2tUZrKsUXHmnI2Nhv/t\n2bLYNzFUpRqkMGBLw2LbLTzlNtkjeORMvL/D5syDVZfCZN61UJHsWplQE2za\n85LfZszV04OihmdLpGTKNZYb/WsT0k4rWSfqdW+gNjqPXQgBfBgOyPBtRASM\nHf01Ax8RY6Dl8P48TyKqdR7ZOxV/0QNPYo5pvEYCAhUAaGhEJZTnTiDShUI0\nTW1A6thklQwMP4xEIuPXXJpckTFyHSPDEGQR+3Op9opoD/IjOSlF8HbX6JEP\n2XiDmSFu7bTsneuvIUkxkkdqdx55CV6lODcrPeoGcdJdCUOrcax9Xrpl6A7I\nx33k\r\n=iWKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7dnXAuSjkj1T/8u5YLLiiqnGfz9gQ0H0rxa/vXe3x+wIhAJwjOR+zDvNHbI3he2FdszQLmuYq1hl0fpE3S0suOxsU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.c94e1030.0_1620860966714_0.9839670433924395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.40a34e35.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-ripple":"0.22.0-canary.40a34e35.0","@material/switch":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nu+5wqAxdUQx543FIGEUgZXl/jiJycQ8gkTp8RZbxhhBoxuXrYNr4bMP3w4hg34cqKa8/V3nGQdHK8SyqY5TvA==","shasum":"b1538fcf82670507ff67358ac655a6607de09cd5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":44687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGusCRA9TVsSAnZWagAAfkYP+QGg5OEBBdV+mS/dK8wF\nvEDrylz3MiJ/rLDxil1cNFKhewEtOGjaO5Ptx5vuUmyFqhNSQBqBt0NmHacm\nDybIC80/5NGtUNUxEfsRY5Oj4LJYlpSQHpI8IP/tPnwcJInITfjkZVSgWJ1m\nKF1rn1Tyr6aEcRhFloLF00syuM1WKnniYeCHzRv9tXGWENQOAbfwThkKChXY\nxkU/wfxQcfFb8SW5B4MpJRegEQ0P/psFkf8QU0gb/YfPUMt16eJQB35U+dUC\nGnJBtp6MEhdUz0JCpHlCw7cm1i1XeGP5Eluo+Sfe1ho/4CRogDFTsia2gli5\nm7WKMcfCUsThKs+PBunUKncL45Zmagi7N7cMpXZfQaIpvrT+tgczet5rKvSR\n62L8XuuWrUX6MlGggF3IS0gMypg4ECNhmmGnmc5eBsd5IayaOBGfkNT76nYF\n/G9R31ccK6QXFE1lZqBN+O3yu2KGlH4TOUOjOVzBnO95I+CCvCm5mG7gNMbV\nWSp9t3KcSOiq8bk1P4LnIIiKKunnkN/HoL1KunhBMBhBhzWdAO0vnsumOGJv\n2K+j5tfBFuQeGyHfUuuWmtujsvnpqlty1hC5x3aW88eqGHW3x04YYZdJUkwi\nOXkejjqMM5mouimgii1SsVdx9TDPmME3jCtdnFiaTkClBzqkJKVDFNqS+oRB\nhM7R\r\n=8RMj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJiK8vgdfwR8PwBt0abTVT0w28kOZcWTRR3jsuKrRGDAiEAzIHXhvhiTnIXsz+3fVseFYXaa1x4NmdnH9vimewL4pE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.40a34e35.0_1620863916344_0.6672428558411057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.1be14d2c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-ripple":"0.22.0-canary.1be14d2c.0","@material/switch":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-38ue9ggqolGsAb1yC9t6EUvARTtiWo5QfnE84Hp4FQ0ZCq52YHBzCUeuDqfxWBmpqQbY15lGnVmwJsgoqZrrkw==","shasum":"ec134bf6f2ea8ca746410a48db59c9e60448162b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":44687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbMCRA9TVsSAnZWagAAN+wP/RJt69VZEjQ0EGxy0tp3\nYSBr9X9CHTLU34LKALNN4ZglTn+s6sR6ZPhUaM8JCBjljWEoU65kDPVo5I1S\nkrOBSL6z7XrFCRbIeduuEj4NVCpJ9ceMRDqa+BAAkKV+Xg29yrSkEUrHHc+n\nNN08QCx/MNge2HFB9spsHt6/ddX83G9cz2uhdO03NJugPR1x+X/xL05F74/n\np7K508svMEc0gCieuqgf96uj3zByoaVT/HNF1SV3JMCkdqkq+1r3/xDfwKhY\n7DxNueE1wXbQtHF8cOqQhN7r/tTWY/j6So9KFVQgjF8bMFJNw7NklyCOb7ni\n5dwbbJIOTXVma55bulEhLTYltbSw7EZUyB4gDMPq9q7WLNwY8Q0HH1iv0Az3\nt2pCf/isPtHu01Gn+girZsw+jkvrC4JQRnlPf3jpDcNScxDyO/5oZOHAnBAh\nz6OQunVfIVCryWrajtJNDIOcTTszv5vn4KK0oO9Ri0H/xYYPFb/x98U1/Ggx\n4rNB2eU7Yie3C9sWutJ1tv5Cj08cHjC20pvIpt0FIUnte2yvOL0hjhKu6ooU\nIIgPZHR/c9rzl67yT0m/zPYbLPxwlaSKv6JJktGC6iodJ106eYIibouz5Jhf\nEIwKbefOSAnZz8KhyIrGZ9k0zLZdQnD55Fq/w6xVog/OtqYBnJLNaEtiJrJ7\nxXyF\r\n=wi/j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoHKpo3SD2v31atCvQSF83X/C38q3AIwMlaSktgfI7hwIhAPZQ5OxJF+1BfUtE/kDwKsWk6VLYnAujX973MI7mojCr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.1be14d2c.0_1620928204243_0.8744705302241029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.87dbd64f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-ripple":"0.22.0-canary.87dbd64f.0","@material/switch":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pvnzpm5Q9xP63EslKPHuYWh+TjbEf6hQvaAA6RN9R2BjoZTy72Gi1Ubw8lzeq9ek9kQKhiTRiFkrNTqKzT7VIw==","shasum":"65cb4b941e05f19a6f6d0263de8424b7862b6cb2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":44687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuSBCRA9TVsSAnZWagAAfscP/0512Mk1ZrFRpeZL7YyJ\nQMFckOV1VHDOeMBcWWI5hvDY0UJ124ztsj/x8fFs2+XVmwif7f/29lWwyM9T\nx2TRPQXZswFjlDtGCi1JxzmS7QCmUaZAlu++7X1/C5opB7Crz79omADdVwSK\nq9wxzW0X8sa1L4XRtfMUXX/0x7j5gtwt/uuSPSK35T9dD8+0FQpmEXiYqV9I\nPX7kRq5eJxlkpLPxVjz8E1m0G3CeVVg+kMn3yQ4Y/0pG8nGM1bmP23pA/kI2\nnnvj1x2vIm843K4ePAHPmAk1XFhI4kMbh0w9jeg7PIcK4grG+QvG+9kcqjCB\nM2L/W+LpjXfl/VH2SiR0YZsBBidjbwHC0U8FFIoEPeuB9LkYhsCijzLabAIS\n97hwT0a1zCRU/vvx8T0mMVeMhLpuprnsdmuLMl2C6O8fKp0VTddT824cvYyg\nNyMwZKKD5K6pmwuoy/qGvXMcIWq3pZFZsFsN9Vz3G7I89TcqTN7qMHj9FiSc\nIEzl+8Plb1RJgaR7q48s6yE6r2hewJDuXaI9gPzXVbmKxCZqyeYxqA8gULc6\nnUE2avAY7aaL6gayUe1rF2WDlsMx4ZQvap4ZwhwMWbScE/8/9RdCMHUp0h2z\nzhf0AF5xGUZCv6LAhqEYuJVmh7SAREwFpNloo++l3OwcC+3wTKyh5+fYyjuY\ndYpt\r\n=O+ce\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYKESvVHzKxXU1dxKAWhiAzAMKFGsdLYXhOCf+kEi+DgIhAPGu457Gze6TkNbBUt6xcshg6db+cRO+NebvKjvlEsU5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.87dbd64f.0_1621025921323_0.9603256599249543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.c452e4da.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-ripple":"0.22.0-canary.c452e4da.0","@material/switch":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kh5CWlQzUBP9nk+q+2j8+NdbMLxA9kUOY/T/OOYBZMY5O6b+37QqXumNEZWb6Y5nnM5NBS8UN3Vfo+7c6LtVsA==","shasum":"a0d8ba22ee5f6f591bb51b5ab85e8f942236ec78","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":51064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0ACRA9TVsSAnZWagAANWgQAIgO4D/sFWh6LJQdIxik\n4B/ceUyv3VsCgKPqrOMk0KBeUGiBe+Avxi4Dp0HU5Cv9ru3u9VRj9UYyWzFD\njfJfxgrmYr96MHfaUIe6wx445o96sY9Jy/sCEGxzkDnQqaZZF9c8lBSWfvaT\ndy6Hq3lyPD7H+U6dPQ8I5/Ash4cx4+fO+6UQPE8SeppKJFlElPnPmDyLLN1U\nfo8ZZeKuDYoI62EytdyPGNYHJpuRvCNUPzy4awpEWuwY4lyyejdHjzFxAlks\nQPxte6YxRecdPxY++8MnctRQcYz5tx3ewRRDfd5aqtbfCUG4MVb7a1S2eq6v\nemr5z6s3pbtWE8eTGo9KtVRQiMuz94yxU0JBrm4R6Vo2AjWGIIjsyZLwC5KD\nw7nIsawfY4tW3N8ye8JPkEDXMuw1bak2ce31jfMk1mHZ202AwD9TfISiEoul\nHHfKk7V1ilxIg6QgVMzE0QEKifp/g2/4bHvTxcEwNP36rfurlo9kKZJIah/2\nKt9SjhsoR2l39fsRSu84sRuQIYx4JScLdw4uiY+sKPpk0NuUBumK8cnTIGKL\nVbcHwN47cq+LEV3qIJ6JvZh2XPwp0CACZOmom0eTT5iT6C/HJ5IaMIca8WCf\nKHZylCYotCgQYZGLlIybzA7tWaMCTz8yXb2p2ZoLaWt4XFX+A91Kqq7/wVpR\njCHq\r\n=SwKN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJ4RIYNlPVWZ9ux2/eTrMu34fT54p++Z4vawGT//xvcAiEA8nxxvRL1ThQlhd7LbildRizzlUh7jB+RIS6DTYqZ1Ys="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.c452e4da.0_1621294336385_0.6288041848657311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.2212691a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-ripple":"0.22.0-canary.2212691a.0","@material/switch":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WgW4UEdms0MKHKpYyWA+0MZEPeplFCKrLWbyRCGVmuAjchc9JjK7Mf3Ya8JWEQhwfFPTE/x7UnRUR5/k0Ikgew==","shasum":"9ad6d5ac013b4069085c81125ebe34a42d61d58e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":48006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHVCRA9TVsSAnZWagAA4uwP/2kN3K0QRFhieXtpGcZe\nsReCllY2Xt3sf8SE4EQtO4fvwIJlxRNQE3C9lCb2iFYc5jWZ61bTYAEsSLNL\nXHOdYX7Ck+AH1p6hmJ4Godg/iKiU7f3CBJpsP/reXu9d1wBidUR7l5cQEr8p\nVXFDno9Tw7eRKLgR/4jaubs5P7WGVbHogDvoGlDNbBd3MoR4g/tRzm9/pYZ2\ne8y21m7mSy+0KD+LI4+LJ+KSyUevmb8PUJ9ozF3ngTg+KeqXrqexK8F3QF0l\nx0mKvRksrz5d0K7QptV9DC5qY7XBOlSSOoAb8txS0AdNASRQfA3O9TpICLOd\nbG/Xl/ESnCbMMxSY/dH3d+gzHboqrsLFP+H0vgQPOwERYNs/E1z13UtO2NNM\nEz7SuUmIKcbrQxSyfhbIU/KtI1cKdX3g1frZ0EBNqAvsoLXg0yhZ555E5Rrc\nPpcTM9bakwBvcwulV20M8LiC/pxtmlKp16CBN4JFAuv04dXitb6l/JT6CNST\nbaY/gb7IYzA2+WH0RqCSEpXcz/G6H/9cwQlga6e0IjW+BV2P/B9BFlfG7nr/\ncsZ0bVEQpqeC0e6yGxUUB+nWXhek1AAxN5hkL9Tg7UUfEMolhrN1zdGnp5Fs\nBwzpElTjvGWjoUJEIVPLhT7oHbVo7ZhIb2Ovc9aVKH1BY+5NoxLjOofLXYB2\npYvf\r\n=9yLF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTZkD8YokgkRmx1MccmWpSX0o+iz6j4HsyM6Is462jNQIhAOFKySNny3gWMUQRBNVBSA5Ds5hb3gJrcS/Kq86YuyFd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.2212691a.0_1621295572841_0.33919413068099336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.f748ff2f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-ripple":"0.22.0-canary.f748ff2f.0","@material/switch":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rIieuzhiNDb3Mkywn3JLTvKD5UVyZwYPZdDUqG2J5MgdXosU1mgSifk2HgN0N4XZaIRrRUjfjUiLtFbV6uXwYQ==","shasum":"7f911b7644a9bbdd2ca3495664319326d70768ae","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":48010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjWCRA9TVsSAnZWagAAAq0QAJVtXI35++S7Bs5dvpt/\nkZqzU7BIvLx4V1je0VBV6l6jrRN6Vhg7/GBZxYMzAIuJUy2D7k9aJVEblK37\nJ9tftAQMw4YnMicSmPbplCGe0XAu0gBA/ZyUnN511g8NTRWWwKo/fnv/zB+C\ngQU8xEz56TJW1ZG0xRElFQosJNDOEHAxPaNObc14kbpbGTIilWv5JRCPa57u\nKWayhTAXlqqZJDB39dRAVfevbihNSqOpiJZ9ACHcUhjDi+67nrMqYYhzehGW\nMUggYGieTqi6+Vq0PIO5ZpB0bJnI4q4T+YLA55ZxTZPIoFij5lJw3uEr5TxB\n/KU5YtPEcFoC2HmCTrtC+85pAiXBb8ChVe4fTbL63JDN/3ywXe1ibVd+VRKb\nAnqfFTMglTflhXtAWeie/sLNvoRiFwpUua6yENp149T9/5FBeGRt2KFCwJ/8\n3BIINphYfzb7VwGNNNIxWYunCw3qcgLZHfgkthk7myMODYSsdb0ZMs96RHyC\ncxdcV9NhScQrfiDPAndjnyRWjrfnCO9pB2l0zRGRoBgdtK3qeBbJ5HVrk8Gz\nMpqtiUHtxgG5n5GHtd9gNdayhW3m3qiPNlbMZgfLzkWqzfaNu+41ulRSKZ9U\nNahxGm3/QBM07agU5Ph6VfJTSKI7taTvcbTBCjcrWAfM3aViXow7EUgf8ozK\nN9h5\r\n=MAPf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOq8FKH25rlTrA67UsvrlRLT2McYiUiCLCkqprumhJeAiEArPVWJN+BFFMI7KvxxmPCbpeqXCPe+7fNo+EREAheLjc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.f748ff2f.0_1621297365916_0.9516169028534791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.cc04657a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-ripple":"0.22.0-canary.cc04657a.0","@material/switch":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dP4dqqIYULckm7UDynVS5E62nZt28Ae622AGneiHtRc1ob9IVtGRkpTVNoz5QyKvrLyF4XKAsKoOwAm6x66nkg==","shasum":"44ccbb37946ec2884692b6fff8ef3beab854d07a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxaDCRA9TVsSAnZWagAAhMsQAJm9u/UFJ+8/EP4/Csn/\n7raJSCgWzzCBzNLmkVDjwQfTQLQRLe2fOBCEgPMbCvhTmWFwjU/LoNJou1jC\nL6K5RnSJ+IZCm3CQf4H8Mx7SAPhHoaZFABhUmdXFo7wXchYsgIrn6+0CkXc3\nwJkjmzZoDbk4JnjTD+Jb3s+YaCNTE6mXfpKOAsC22w0i5FolkGLEBpvBIRLR\nRL0I6wNgQy7MszUdHr25fcKPFftCwtG+PaQZe+mFv6xlT3abzSDoJonjoLSR\nC7vLOppVkFmK7lYzjlSG5d2t//kpTc8y5t35tK/n6k3mPkYo1xOfrqEYJNHB\nOVTCAVVsyQzQedlI8rKEpDAI5hFGL8Vl78cAsDQ5OzkrWLQebB6dirsLBd1I\nOjF7f0gnqHxr+XU5ZVfDEjO2mkuaT+JjFkotMyIqkiTLZBqIS1j5q+4LPpml\ndya77kv/q5tjc9Ck5T9A32Q2XL9N6MjNItroTHbBCFKAfyeeFBl5X492fHnA\na/u35whor0cc93LPjO3pUbzohNQYubfeQwHtUiObrP5wdaJ21MEUEWinw/eS\nH5JO2BPUTceTcdf+Rdz+aHlNeBTMsk7oQpRcyRHkJuzDHtJ/CxwOQa/XqIpd\n510dgDjscQFuNyPT9tVhQNLPHNlv2nEMbFEKZuRC844jY8g73tDsM1wtdoSd\nWl7J\r\n=6emf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiDPp/N8Dyf4AdBaFJv9tTpNvu90rABqh5KpQit/6AiAiEA9coTc5AKnvcOXtGGbEqCGJknL52qKpFwDBpmDwA8rPE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.cc04657a.0_1621300867457_0.33157438059547517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.3a3114fa.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-ripple":"0.22.0-canary.3a3114fa.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+M11VYRO179gh8dGEGTFuNQekdKTlBoIYM3PrFJZl318fy4PB60CBHuRM3hvD/852SCN31OYx1eBnxGHNx4FHA==","shasum":"e598038cfa055990edb325762a6ecf70cbc9302a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHsCRA9TVsSAnZWagAAJ/wQAJ+YbcjCLVxXByTHzxm+\ngMhg/KAQfpqhJigNeZ5nrHkotvMUH1zStypHE1vH+S+IeUSkaFt3NNDrcfLw\nqWXZgQRQKRA+OO16+cHthgg1vZEDcSoXt/XtCLKzjfG3dohhSI4hMlpknrAE\nDkZpNDdPIwbvIgOy8Z/0CNPlu2ciRHDzRJqDOFY049/rC6RIAZOCEqcVyfGb\nGoPXcqLFE1MvYbgs7RjaL7sRb0U5Z+ZDzrqo43IxmWmUlIuBymRVQqLsAQKp\nDbJcjYgeovvBxw5bplhO60zv/l+Qpa0Ym/eMXWz8bM4xt3wTs4dmEyIt57lF\nt7BcqQfYDazLlC9jNxwANCh+guabRxKiVFrJ/mWOOaM15ZlckzZf10tkGzjh\nRtKORWIkcswhBk0fEKxVir/Clh2tLA2Re4ozoQslt6OtLEP6BbgbTEEPWGMa\ntoWttqecHsBX+yZRhfNc/M0H8k/EGDwYl+Nvx1rjLxVS7OPeycYRkxXebkep\n8/hv2wOBAhrLtOY9s5OfGAx+DgW76xjtIne/4bvgJRaAd51UFoEAvKuJGJ3J\nWF3HYZPTUICBgFeeIn0RrANTgE3Q/NvTUw0NT79Z3ns8yFDeukdbF3aSpgkt\nLCMPbbkv6i0+KW7uY554nlqyH9F2m1azoX8cq7mlA7IoKr8GN2/5GIltkNfm\n14Il\r\n=zaMB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVrYllhV8pffphyc2ALOwycsVS6RKcl1V5ZktjLk7rvAIhANLbYgBjFALFuiL0hl3m35RBW0mGu3a6Zc9jcVwX1zA9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.3a3114fa.0_1621467627518_0.8124559338792288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b46bdf83.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-ripple":"0.22.0-canary.b46bdf83.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-31bJYb9AKVe6L284FnTdsH0mb6nTw3/v+ssheQDr8DmNn01HXFYjoBEv0rzPW2+VW3bWZCZRg+bcGe7JkK2csQ==","shasum":"95197f96575f7d33992168b3a33c6ee44a4ebd1b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCUCRA9TVsSAnZWagAAq5kQAJ72BVHjwyH5ir9ROZNW\nYJgtWnNyY78iO9Wrj9i0vXrpaoX73zfAc3h43jcv1vKII/gPwueu6vDbv0kD\ngYXrGcA53ohOkcvwdfoDo4PosK0NSiGev1V4FuOeJeJTQmwHMXwTT1Jsqrns\nITUUJo8WRm7jvPfVN43QnusWJlo8csiuAGPNWhuIyv6UlToL4FEkQAQXWQQB\n2hKAc4FE5ob5Z5KpCBjAKhi4PXqo2OHaLhvVjQGyZS/uIiB9OLnDcGwK4zZl\nRTlMEzVCrUKocPE/cdmwG7x7dO9m4j7BtZVUvVR9jhqPMP7V7co2GQjwtTot\n25o5dCrDJNaio3QTAkQzVuB4OUu7c+ViJjRRRIm8SanX3/2V/N+aPuwtdjqz\nXTpiAlSJ/mrptE8qj22nm8Pr3iiO15+L9qUqbKLQhD2xfgpMm1PX0wupu9Lw\n/FjMdY4y0aQ9cTQAnHw7ZU3nsiYUHiH6DEVwQTrOIRS6kV2dyKz6g4XMMTJs\nC2F8GO5nb/85Z/5jMAuGAgfL1ydBfuguTPmCKTa27MwpzKo/Kp0YfJTeBQsf\njOLGt/BDMb4tyHYDB/Dchn/dmxT9s1T11QWbJQe7pn0rviV3JR8e0xlqYBbq\neOEOTvrUS1XGAHAWRcAuafMkT5jnIPyL5QruVWzxviE6Vxl/jaFOikwte1lU\nL9/T\r\n=lia8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh27V0vxDybTu8QtuIZny1oEcAQqngek1ssof9lp9WHgIgL2pzxvnCDt6E3qJnbKkabcBq0Zk9HwNSgLYGwPkiYlo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b46bdf83.0_1621475475495_0.5653273277143422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b401a081.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-ripple":"0.22.0-canary.b401a081.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EhHtAqTr11H0aY/NLZAT+AtkmgVBCjz3X3JGsVO2DkPO0SuS2Yu5xfL6pTSt6k4U9LqKA+FZHK34k9m9VtLskg==","shasum":"803c0ced184a3b4a55905e19fccb170e33643553","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b401a081.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDlCRA9TVsSAnZWagAAjIEQAJSOOaeBZkNwJko661k5\nG/UNJUcmHSW/Z1/bkrXECdInDKOuq/sNFjkHHb/GGEh2K1xYSbzcpDUNmbQD\niMs1j57Bqzp5kHTl/gVuk0Feo8kylO09NHdkbGyUMaE89zLXGRTqh9UAnf+s\nk6UtzYAtG/nwk3Xpry5hEt2cY/nfay/H8LgwIE1IvE0GaeJlwmYfQvKl6W3Y\nj4ibHWI0qyizRNyixtQla2HLIWDLnFYW4F8MLs5mlReWVAb/7GDhu9E+U2BC\nhUz5bqIUSmEPT+A/e6WKxNBwOTTO6ndGfv7NBpLcTaCNuYhLmNRwXN4O+X7W\n3tnwItXRZSIhzCzunpVTGngwLTEBxXZHIi/xF5NZmpyPQcPb39kAUr4S6tAJ\nUDXjA/aDJJ+OTrsIvNAKCVhbTMY/+ljnK3PQLNYcZQvDvruqOcqN3pFGh7Um\nEJhXpNRTEzVrmFMMX1DZqmbO6Ymu7LNXwKgx3fClFuwiazXLWNmuz8ygy4vv\nYjtFQzCTYS1fXy1BnD0jzXhMIwvFzIPo2s9MVOOkqJt3Or2jCARUgVdtrABJ\nQlnnmH/3uV1SVNyWN7dZHW/thpGzJXxjAkKBPKv5Yhg+gHI4sg4W2SLr+UMr\nUGyptBjo1YPnnxFRnzr892HQgqYFBLPwjN4mMGJ1XQHZBydcc7/iIMnOwiYu\n2hQd\r\n=Jcfr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYW2baebuE742/XHJO9ASVVGIualIWflUX1liN2OswSAIgSAEj+/CLiFAbBHs5dUacqkNwrKvZ8dVYGSE0tO5eizk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b401a081.0_1621639396932_0.9665729762745154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.012c8dc0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-ripple":"0.22.0-canary.012c8dc0.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I3kKus86BpVTQGasAHuDYQAZPgm8VA8iSBQNhgP/VsFL28YioDid3y8wjVLKg9sWMezwTWNWbCNwvKULUTpRKQ==","shasum":"e5a78e87d2b2e9a2db787b1da514b1715f5770ad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1pCRA9TVsSAnZWagAAsXUQAIlYHWy0AnYvPJhQyfT3\nEg9rib7025qrKS2OUGgy4mXGtpPNOFuEsjnN2+XQbRoLBbjF5PXCRulEzRnL\n/xPJXTUG8p5bEuq5jeHG4AxUM0UpRS6GTdBbuh1lTSnRptHfe9rOufF/s/IX\n0GLR45bqBXIXLFFjHABxvtWvCF7A03Zo9DKabGjS2nWaYsAPTLfLlmGKKpV2\ntbrUjDnnMMBRVPjex18VAFZrfXxaGdX0+0JJ6QtS7SxqsiE+hi+5v1Knx2j4\n8bNHZ2PXvgfiR31UoA2Zt3QJZQzLwg+TfDNWv3IxVSoHHiGlFh0Lqo9wkPRJ\n+vuwO23JA0XEe6b34/ie5/tIH8t7YXDADS5UTvoq9+FgX4GnuWQuEgKNm5SW\nBXFUwrgiJr+l39jWGWWmQxI5X7UeZC4SFfMl3aF5+TbLrb7i++QIzazED0al\nvTkQ3U+vnswn+TpgB5XcyHKEKfu2fXsBSxqAUncipYXSdFBo8/XQYqRL64Qm\nQSNcOyoNSYAkDowMPDVUL59ccc5q0zs7y7CVYhg/Vy8rdcFiRJlzEsdopGO1\noW1Ek1kWJTD31rPuuHVFEDnsoXKmZXDTohjOFgZMxOFEckVAoQ6phyLD8taQ\nmMn9WFtH0G+Nv0FjSQ95Kj/NxWQSBC+TrUMh3W/UkQeF+o5+/0tKsc0BWB2L\n21cZ\r\n=g+GG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/uYw2mNqlGZnqPeE/yU1s7AaSZIulxIm+i78o8ANoiAiEAypWu8VJMUo9whW2Jqfan9tQKs6EbDXRSox8FPJOBseg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.012c8dc0.0_1621642600616_0.926148657720598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.e01a1731.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-ripple":"0.22.0-canary.e01a1731.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5wBDI2OO5Ein2xd1R01c/gIpHmYiky/qKmqLrGnxJBXtgM2XA/+OGxrESDLJxdTZz66FB+JTnjv4LQd5lRUUXQ==","shasum":"97c4184c1cc76dbd3b7f2b6942ed3d26783cb3b7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq842CRA9TVsSAnZWagAAobYQAJc1EK54DDnlP24Ehtu6\nyDDkU3INYqPH68rxDYLNcF31mzkagGN8XwEDYgo9aR9Wi+pf2L/HwcPvhsbg\nA6W7uPrfY8ji7M7daguSE5UyMt7kichGL4od3LkF6IkxkbwfB6jTzhQKfreq\nTXh6XEWDZgO6k1hNN1kZIqtxKm0SrociBUvt+bJrAFUmY08AjteestneOxYU\n7nEgkjekFyj/mBr2e8Nv4g5z2aFYhJNp8o8d0S+L5LojMCZnjJ6WMbKjl3A2\nS2WmArD/ebtzTigY0xir9X0Awa/WFYwH1tGAboUPJSTgxNpQB7lnxnpAphyr\nyZwUhCakQG5r0JN8qONsrFYkiD0GEEDVcKExqnggkEYVTMdS2AEZk3vJ4+0T\n+4c/yZVbMcWbbaJ4ahIXpMON7Z+lK87chalh4Gw5y6d5ObpWNTcDcodH3Oq/\n8OC8NExlmtTLlGkYMlEovAECte7L0W50ZoQifag8lw32tLxMVr4z8qjpo90W\nkWyWGp9vz51Hi7L3A5FRcXZSlw7jD0Z+pLu2Gl1GPRvYjMflDHbTK7lsGLWP\ner1485LxU3EMTZv/UCRM9Kx77zfowa1tAo0B0/kgOESmB3YtOHmNByIzr1A0\nBJEh8CyVUdnfc2HS2vk7if+hECwXPRWTby2MW9+qfCNqGlIo9raLn23AnJdl\n9RfM\r\n=ZcV2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpZfCqeZk5W+oPOl9nKtHHGqt/yerIeQu/Hk9YWm1KvwIgSvgPUQh2Gz+SiSmtSRRE2LB481jEYTnI+o2FPOlVZZk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.e01a1731.0_1621872182310_0.6019466511303857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.59174b9f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-ripple":"0.22.0-canary.59174b9f.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mh51JdbA/G3tzVNcqsJrug+MvF8am3pz34lXa4+MJMfsFtmY1WbC1lrm9Gv8o/YhvBWMkipudFVyRrV+y8FH9w==","shasum":"768967fb665da996e66ab9ae7db3cf883fd316e5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTu4CRA9TVsSAnZWagAALBMP/2GpJFzImA9+kEx1ec5+\nyw8R11L4PWDS9VUx07KdJdhZEcgPsA2FIX/Zv/T4/rzZX2SIcKiGX5hwfd7v\nSO6MmSGy3d5rLyUCZBeOu/sjHKfGlGMOhlkQYEimaV+UTpZSOz67FTzK3vjk\nI3gC6aGBFcvO9qJGLELfi5ZRm6uNZKD3Dw9GrLT9OxPAujzjj/frNg8z3YMz\nodbmRD/slfVA8iwoHYXwe69ubds7Xx3mBHmLhsE4KrFkI8iKMmIcaBcJz8sP\n3cvyLVeNMgxkacDG99kupIzskMlT5rX/RgEPiOMqoVynNZ2VCf0pUpHts+PO\nITD01PKmH95Rbg+XCE81boHVTcciIuPuEnmjbrI7JoyZXzHkwhDZWMIyE/v1\nCAUQXrZM+EnrVGJnjSie69xM5+ukt+SCt7oM+tmO8nfC+pMfCjSTR+YqpGoS\nfmlXW+NL27GEN4U1uAL80JqAptLbofELvOqre1eIftoal8zydvv9JyGpsrbo\n8k1RaFFTz11gVJWq/TgAhT10whhplEfoe1BOi1wLXoO47t35v3LiICA7sXik\nJjhfpfcZTDgilL6X7H2G6+st6BhS5I7Ner4RmvvhzWFQAcvwC5n0FcFHVMqZ\nxiG09lSPgKnwOHGEzKi5V77MlBb2ti/CCpZehmbp5TM+h77MsveANXMLQXkX\ni1Fe\r\n=43sI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmCh3nZvZp1FZFkaMZRn/EQhVVApDIvAYovnGjXwh4lAiAIfxxAmwGYcjKWnyU/lpiFB5/0BJmm8Fxj5aHrqtFb7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.59174b9f.0_1621965752290_0.3758936919449123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-ripple":"0.22.0-canary.c96cb2e0.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xSfFWwRauK/fJ+8T7xOYkFRJVBM7z6M5PHPitK5ox52GLpELt5wSseDb2mbJtVmlno0WKe9aJhO65kULPGdiwg==","shasum":"314ed697c8befd23207f534a295bfed5705ee8c2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwjCRA9TVsSAnZWagAAjLUP/3wmVzzgID/CPu0+iYg/\nM1qr7RuA9Q49yvcJ4LoZGpYmWGkS+Esz+r4GKC+nU04/h80zuDcufSCftSRA\n2e4DI+iNzfO6YcGXFsp4Tw9oyBdcxk4PAAPUURAToO0pxMY9Ecn6s2L3GF7K\np6ebeIboatiPkx4CfIQARaPo//MHqDIJAI7dRwhLVyQddH+G9siqYpzJCPHH\ne2wg0FIc1JSOPR/2HhkgT5LitkySlmccylQk34v/B38ZCJpFaXmJHOKqSgmw\nuDmTEvW6Ji/tF8+bkowruGt/29q9ujyi10KZDPgLuaHBOUzs77fjMubf94Du\nRbibDKo/eUh8FN7JIKVGvNWSidH4hWxhdSDc4jCuu5mP8Nzz+xov82kyfBWx\nt9YM8quhbOxi4KUVsNAZkOjuA/OtkWBfWDhniKcIMLOeyOTb9Opu50g/Kdc+\ntlZslASxInTIm+kogkdE4qdF7DbmsTQG+NpcfL9iNlX5u+QdzhZOcAY3kK6k\n/1iMXHbpOH+xqGXuezIPF8VNYm0SGuQZtV4mU8FGZRVQT9EaTy065DyvxLzz\n/AWGkdplxQEWM+orx4dJHhfqj9SMu7OGwbonrpNoglCZ857VngiL9nYfv8Py\nLkIUdtWxPisgbpU7rmGbrfENORhOSgawftPVmz5W0uJul5kFGngStx2xstj6\nLArS\r\n=KnOn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnUPzX7nP/Rl/N7q2dlUC6DbH3pJChVfw37heg+7v1gwIgLIb6IORYIS+VLwuez0Mp/PFSS9yykiYeXHq9sK/XPrM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.c96cb2e0.0_1621969954873_0.40494596048489506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b9b0e330.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-ripple":"0.22.0-canary.b9b0e330.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3vG3bBegyIm9rPVuu2V9wEh461WpR4qZL75MLof//u1tpebeyoVdbaGLe6Yf0BDTBHanxjL5o3xq5vQ8F/w2rw==","shasum":"bff12ed8675fa3b082e6e0a1542647ed9473820b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":40707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWV4CRA9TVsSAnZWagAArs4P/1s2pGdpZTU3sd/X+qLu\nBqC9DqDkJT9XZEA3f5OOHvciPo9sM32fNkNNRFZyVQovrU+HyY0oSegNr90+\nELOb5ATok0PLB7H4n/MbaIRpFzTMQjm1O0gkJkOqaP1/7sBGZJy4P1+kGxbi\nS8cRGZjRL/emnUyhlHRmNpVS3cbm1vilgYX4YLAUEdSFdttnwGGXmV9mTkeV\n9jJVXLSsggmU1D6TxxK+KpEEqte2Fm/sl9rliddZT2xTbKX/DezKiIvwRcYp\nL6gVwKDkcsfv48T2gRV8u6rQNaR4Ib/fr+G13vLJd82LxQreCTa4xBPMHtu0\nfBWNRe6qF/wmhMEz9aK3LIHiII/vqYU5ZP5057KjJDGTyw6ELJ+hpEYABcmD\nTcFdF9xNS+s0/M1VDVKFmVHc0TzU9Qy05wKaKEwkRhQXDLDsziPxEf6TLk6x\nGVe5aDlAL5BK5Uc57ySfgUuPsCLdlLcYsSdkVneb0Xa8UA0FRYFAPmIbVfr4\nU98CJXHUX7FCtjAefziaIoq6GvXtLw+zjBFH03SLpexOcwQDqbXT2NehkhiX\nQRlbECPWf4Ej00P5Fn0islIISbixZBklrghUdi73oYRCcdQNoU3U3OMbWQrA\nRlYEw10P1nza4LhFbcON/NxE7gfcataJ+9YHTqHMx53Cv1qklkT0qagwPNxt\nz2kk\r\n=u9O2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDExyqxGA+soUv6ipBYaD/HAnCScO53ut8HXBTjBoDAAiAYB563+oJ4ZtDjsWW62lA8pcL1wgRkXUiBxmOt0ISp7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b9b0e330.0_1621976440530_0.31461079513250634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.ea2a8063.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-ripple":"0.22.0-canary.ea2a8063.0","@material/switch":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uItBX6zxvu+W1NkCrcBeRbA0pqu9D/LkhbCYoWlcAyv7bZbifLuelPV79b5+F/aQx3H/JDCHn3LhMkI3VfgxoQ==","shasum":"eb61abc8d67585c831ffa22421463c19fe2d3478","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWanCRA9TVsSAnZWagAA7yoP/RqSZifem4Xu/M6MykKW\nA0WNVT4qJYHNLSYkDU0e+yCDJEnydKSDmaGYFElPEx2irDoJw204xVJ/KTbT\n6tE5UgFS2gG2PjxGgr4pvYNlcgUbSDv/F+aEC+Y5+/PII4QHCcshq9fpZ+pR\n5hLRF1v+kd5czNz1FvvhKtXReprWjDvqrk0N0qd3j3rhtaZ4pD+BjYHG1t+D\ntJFe2GpecgJqa/yNhpCQIbkNpdRKVQeNlNdhAzpZyFftO5fKK2SKGRbtTf7j\nkfcY2b35M+NRkTYdES5OdyQaAb6WIBS3GsOWYmZS7pZExGV+Wc8IRh/cebms\nOgfFMLGL6LYY0b8DB7E8cAXsmJ0Z/bPWeK9OW+vOBou4Z7ngPUP5m+zTRCgb\nw5wwppaC8UfTBU7/Akal7KsygzsF6qcXRiqVcWolXZmJe3XpySqQQNNPcGfM\nVM1wl6wN7l+jZ6LvBcIjheoBq7iFG+7IgTzPdlQFIoJMHOoa8qLL8DEoE1lw\nWVVSPkX6Po7y8O0w80Kc515pzqt9FkVoDWqVuCcuXtmX5KjNp6aoE1dqX3aj\nxPS9tJpgA2oRcTGD6voQunJXUvX8vw1UR+oinHNQDsgEDtOnqSVjbCI6Krfp\nKpzJzenRSzaKrVDajtRB53l8q9q19GSWYT3TpB+4CAIkEYBnI3nZ+Smns4hQ\nkJgF\r\n=A3W/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBpD3d/wrR/9EfZ8YKo/oJllJ7CQwEqwQ0APNOMK1tmAiEAignl2Ss/ZnQ6KX+RuhMtqe8kvvD9EL/g9Qe1WvwKTuw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.ea2a8063.0_1621976743281_0.8971927619864704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.60cd9178.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-ripple":"0.22.0-canary.60cd9178.0","@material/switch":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.fadab3372.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ogJAGT4VKvRKqKlEEsi4MENBACt0e3EMscdoxbB0ZFSOLK7Fqkg7IeFJ2BPP4eiImYxv7WltSpC8DwldYAAa1Q==","shasum":"6e00ebb41d06d133b87cce85f9d31429adbe27dd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":40735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTKCRA9TVsSAnZWagAAUHUP/i99bsrEzqMnDJU7CFVn\nzCV3WtofFT4hUpF6ezp0P8K+9cOuaecFkt2TS07h5tYxVhX5ribjrZi1d+i7\n7azbJy+flu+a+Te8fDzvW0Xjx9V1dAZiGRBmpdeNBsCgl6cVnUSnuhMf3vi9\nvFOFRLkjkE+CS7K1ssoRcQEwbRvZaNQP5hOQR3kY3hUe3/7EvKbw2B9Ur0og\nYd8X+Dareu5rDOa7X/gmWD9F8B7Lw2UTpXfCQ3j5w4MAVyjKP91KU3PAMXpY\nYUCBL20vGayDGIO0zdJU9rsju0ASgl/y0tg8N5xR4cPq74oqjRTuZk+5SQY8\naG6ybn2vgoliutZctCBAGr/JDuHEouRagh5XSQwGfwcXAf8qq6nkQpHwExsC\nw3RxVXGEmypfIsru0hjbTzOvBO8FAwQ8n7fd+/g78A37AVpyK3KZE/ltSqH4\nIOc3oBnFtIdjv3UPvCraUYF5ao44jhPN6SGMhTZKkCymW1aGgpyYKaUhzei2\nZOJ8YvyLaXDiaL/VZELjbAVrUoq7dXZJv5wyIqWPCzggMRIbu5A/rivbnpbi\n4akZQXf5HeOsp3L9qlM7ym540xcn7ymoUjGzfL7d3eOF1xJjBgJLXhZeOKSV\nCeve6cXosBNHs9NgCXAvri38nyG74e1JJ8rAywCn18tnim8qOMB54z63dSRA\n/Hmm\r\n=IrGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIErU7dTVm7sO9U1z44i8mksQRTdN9m2E6bThVxMsb0HMAiEAlmQdON6TTrjsGtwQu3awwIHkukOa0z6jXL++O3BTpw8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.60cd9178.0_1621984458367_0.2522392837497509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-ripple":"0.22.0-canary.2e2c75f2.0","@material/switch":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.fadab3372.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ktWVUzYuPSanWY0+j1MbzaYwEPuvPPuPckU1pQvfDDL1oTgmABmO9Y9V5Yj4IQ5A0tp+7Z8SyD6Wj2D2hrCqcQ==","shasum":"ea5a336ccd68118264d65a07e7a9ec547c20aaf6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.2e2c75f2.0.tgz","fileCount":13,"unpackedSize":40735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZI4CRA9TVsSAnZWagAAjXkP/2FX5HgRNNyl3pEaakM8\nsVoZHctAS7qqNB1EWj3lpJti+mItOp0/iY55Z05ITCKJ6rwqpSfmqoo080Nt\nXm/gvzXUbUYKSTN3svvij03WJfo8xGKdSywsoORqHkjBAIaVnLs+F5IAVlIr\nXz+97D5OYEM54mcvJQMMhvJWmSsQHRnTxogih5sitaOB7HIWeOuuKtVNB2Eq\notLVfjTffj/RSEBbU8GJN4uXExeFn/HT0YhSTQtA4Qzw6ivVhS3i31LBzusJ\noJBcvGdo9k0TFAkcB3P4dbAJG8ct0OZ0kWG5hCPd/ypngZDKfIIhKLdmBJJa\niIxXSs10Zd06tOStgqKTY+8ZoWBuLtbw7MFtLCoCuYBPg0114CpfHNssWjQP\nrXoShLZW8uhlP863jP9NOzC7ZJL1sr4acZWQfaDYAVbt82BI0EZv+/ST9tZp\n1DeGSrwuVndpF3jvjgu0n7R8J18AWM6cHEeLStooGq3k6mbCDWsVJUkTjfJy\nsDHOqt2lb1CfP6yI3g1Qe1pR1x1J6E9dUcasxPFRQQIOwPktJF+5UZBuhBnU\n9S1MsvrSrhI+2/vxbk7p6cd6zauFRnq+TfcQf94prH2FPs5khukhF6FxTbPi\n6Xm4DUyNeCAUm1igXlT3pOaTgtg2r5onzCIEDySTbJ/hfy2HF0mOrgdiC3PU\nxOs2\r\n=wZQM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIES0g4ebE5iZ2Hwv9K00lcDlSImOVtJNceBtuVmOZAsHAiBVuiN9/ylVxxBKx6WuPW6xC2tRynj6uJg2jvfQHklmiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.2e2c75f2.0_1621987895740_0.3713500557496836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b99c77d5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-ripple":"0.22.0-canary.b99c77d5.0","@material/switch":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D6OJPdh4WX40LtuW+dT2W9wWjk4jzRxbhAQX0e9sPWC1SJQQQZ2ghimj0aYogpZmvSagkcxKhh6/w6lybgr9+A==","shasum":"abb68877d237ab6d756ff90d44e96959d7b504b6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":40735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3bCRA9TVsSAnZWagAAhtoP/A6arKWfC7A+RaN9ONEf\ntwbYdqY1M0zhXqbKs03Aolp7nM975fs5y16gGwRn2lwutR2mawqRHfruJ9YW\nrp+H9xQjYOSxakE10jH7wfKq48+Kwx31Sk35/dEDLfTpPgazHA6wePyG/zga\nrlOoUmy6nPlbsIEUNuhnIrjh3OiYsLo8djYK1jxp8GFUtcC1gEbUgNByXmaN\ncfQeduEyGStnfGpAzms/qCGJsUM4tp9HK/hIraltgAB1SlRFboEr1FyFohyN\nE75qNMY62A0IbS8wuTNNmEN26rCecpQvYQSQD/tvi4lIy7DbBfDafN770AfY\nBum9RMq38f+XG18mOtoH/4fwNrXJvOkIXhe9+KloPKPjpRwnttcxXSFhGsk1\ntnbyB4BlyKSLMIqX1M1yR8w8o0IAUF7mZV6j1YfpvXOeZtcAZVgxbMDbpGUo\nijmVW6k3AEf80pPBZNw8ufzqsdxchaYTGxOKvgV2jntkmpxaV8Hil59SL6+m\nJ5iYrRm2AQ53TTZBZYmC+2ioNrG0u3ArU0O9Nkvx5+otsyFIn5cQw/z2TvVT\nWZnGkPrFHJDcZQvAMQX8ujjVmnco0nHBBo/qEsmx0wAHDdt2p3n4ix1Wr61b\nYnhRzxPaiIatfPOuMcSLCYeP3/NaVI3EHVSb1v2/KpyE7tqIx7dvUFEB/OAT\nOdSs\r\n=tIk5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD412Ho7TyDEy3OB72CRyYHL/px/abNch6eM91Iq04NrwIgfN0rpkqfZduqoT2nal2F0Gmgi1A62AyhYc2R02dnPpY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b99c77d5.0_1622056411451_0.9822876865863246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.0de82c12.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-ripple":"0.22.0-canary.0de82c12.0","@material/switch":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WwBGhgs95sWk7pg94hEohs+/qGDMEnYgBaJvpvlQHLZ1vp+5nSq8ID6HF4dpHGx7JwcCTdSION2MviBk3/Lmhg==","shasum":"9ec2e30bad7548333236ac3d8f0aa5362f20a3ef","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":40735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4qCRA9TVsSAnZWagAABusP/j417dYKLMFm24hXAPQq\ns/FEPtpiLEpletrTLG9BcpEa6lZLQSsxBL2G55dN/zJFjmaMyVAxqihJZO5v\nl1gl1zSewX3FAaJz2RwZmYYuXUk3iWk6drOFnR7rSUFCqaTg3qbHxDyxT0Gj\n5BP2VPhRDBT7+hHL6lmDcFoL3/hFqP2cMCl3RP/l6sHr34tPiVgzLe4B8w9a\nhFD+htGxc1F7MuA/JSiPMiwCMYW1Pm8N6tsdMT7S2whnYR0IMpIYrPGRbbe/\nZkqyx8CiVMGndRmqLIYmg2MIweLARVA1f95xnIOYK5TNdPZR6UQzt5sqVYNc\na3dJpEQpkBGrPfKrAGT5ijOlP+CWBpuivpXqCd9howMQq5wczM/pmuDH7Z7l\nNdSAp/tqELNZjFP+K2jo6mTdkNn1QXabR7ETmjMS4BlvaD5mwENR6+Cm6B3B\nKtzwyLFXDRxldG2X8/nL0Z4mTtbD41kVbb3P1hVAzM+mOKyS4BsNyey6OQSI\n6uEs7O0AkKIrAv07MwO18wGkjPLZFVbP2S3Wm+ZO8hO0E9KFRAX+ufoKkVlz\n6zJaZu5KLN8814UY70hOGQDOzwXm/K5vXYCtsaJmxmz0P/2q6MDz+RF6rvbg\nEblLdwVoqGeX3/mYBtgpyqHeKpGs/oBONKLjTT+sjnvDrnuix+KBJok86TeQ\nE2GJ\r\n=+zQG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDV7RFSuDVWwrGWonkI4HhHbW33FBzsJ5MlDTSUCRlAkgIgenUZ59sOyVTitFj3hGHz6YDxIiPOBDd3jCNjvW00BAA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.0de82c12.0_1622064682125_0.9625891033363168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.227a4614.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-ripple":"0.22.0-canary.227a4614.0","@material/switch":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qQHn3eDkTCrHyNxsK/BNynfCpPZ95GSxeSxjB0yGGTr6c2FduhUy3JPs7UO8n3aFtnat4F7994SclO0IHtn+MQ==","shasum":"6d1d8c2b75862ef6dfd1106617f9b45fa22631da","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":40735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LUCRA9TVsSAnZWagAADkMP/2s6Ccl6rGtVxwmfEFQs\nwO0PNyFLLe52aEe9ljGUTJdJ6TEy4XTJc3IGxGmtmdt6dp0ISPhHpOyCHTm3\nZ+pYFzvifM6p5++5vhJIYokwQ/ziFnml+sEJw+0yR/fQdnVt0KB7fL+JsOiD\nb3WReA+xS+ZCiyfRHqjqlB29jSFpZc+wx2bmccJygr1sEFwwDS01K2YZMahM\n0jPvgH0ecsp/9uN/NIP1qJTJFmplUkPL3YERSDFyrUd2f2lfIOMMXH66GO6i\n+Wiy+tGWZ/Fytcg2E7YQ/oy8m6jZCo05dgmrx3vAieeU0XiHHsHy1pMF410f\n7ISg+XdnSD8CP3AiMZGkH6RmIy7n/mBaWbqrVbHnsmDg9BFhidMvqdKZMRJe\nLUyiFQ/jwyW+0lv0+Ou2tV3jBKyQnF3F7Y0ZBbRcEXCBNZuXLPqUuZU8DBKO\n0cFzqVJJ0RDY2Bvs4ENE2NU6h8+9+Ydjf8bTY6Q4Ymi9IlctQntajv0uWUbx\nOunGE0Fm6jEB7atTaj3Nupu3Ka2MgeMFqstY3bYUgjeG1kzOKk+3FwyeRPEt\n5Ty1Cr94vwFWHIZwNqjyTYjVsUgmsdGLAdd1tm9L1WdCosq8EOglZ7Ua1UHt\n/Kv8ZEMFgghAhW1A5QK5mVHEYKd4N0KeHgRnyEl/v7v5pADwctRz0ETXK5Nn\nmjZW\r\n=vL28\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOdP8VSGd5WLWkHOaHLezlCNx4DvFIS0SHL9yrb/t5BAiEAgo0L8Akn+u8FZF7UCQcqrZty6tJdZGEk2uihHjW51Nk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.227a4614.0_1622131412009_0.818676766274498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b3d21d31.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-ripple":"0.22.0-canary.b3d21d31.0","@material/switch":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8530d3514.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OhxTM4jzS/+Hr0603R8oE7ozJGWuQsZwwVTXHka8PH87A7u3ic3xudlaB9j7UF8J1hpalmWCc3rXSqi0uOYUTw==","shasum":"763307e071c2081ab03ca9cff5773d7e60decc6f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jOCRA9TVsSAnZWagAA2AIQAJBlQ6UYOB85SoEBq32c\nt3vlcugnUZPAJU+kSRW65LbVhkYWh1k2ZfUlqE2lVbao4lJWFc3yEO0nJ3Km\nr9FWDCY1cuPByWnUz3p/0lWgtIryJKrPXnll9kBGhb+OIAcsutuJfOmBy8z6\naeOD1kXVrNtrK4i01+dFE5NQL9HRUposPXL0hRl5wWDMGuloXD2SzZZhg8J3\nB+dX4vVT9HootDD2f0ibpsERMSz7WQoNLzGJnDAj8zmAP2pc38XGcv+pCK9K\n1yQTOgyf6Gxslui9IQMB4cxGJUvcOYiGf0hFCm1hRscQz3QVJ9tJjHRghgD5\nfwePYtzV6kDMLk+1HU+d8CYY4KBlOqwFVaTpDZdGlGiZ0te86LlZ0oMbhGyd\njInsT2eX11cAN6Qr5Ll5fTj2ccC910XGkDdkJ5WV6mTwDFnLbxkpc27ikrxH\nDaTdc5J93Io2DCx8qeUWldcVG4GSBWUEg5B+/LuM2G94tRZQPq3peBDtfkPq\nQeEMetFOpHgi9FmwIbX+bmjbG/afAyJIjWdn5Etrhxb6aClJcVrEk7IfwhNa\nEoUpe/G90hESMfTLRy8b/C000mzdnYmVAkvRPHIK2dR3iNR+SufoRs6MnkvQ\nO9Sc1EE/vLNT/QhQBZOf5RpnFMKLxlKYg2JnkLOVNCttZRkkBCJJvMe6lZbi\nv9aT\r\n=zgKA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2sIgSAqSTXRFoHgZlMDrnEBcF/XSZCDUfgFC1rNCLEAiA34D4RJEs1UvRdfmsUuyxM/hbHVbdM8CU/Fdgu+Sr5cg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b3d21d31.0_1622141134087_0.053807558953271606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.288c33ec.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-ripple":"0.22.0-canary.288c33ec.0","@material/switch":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.00b5899dc.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I16g3HDl9KT7MYExpOBisykbbN6akLh7t1rbF1W4OJtcJFvi/YFcnTY5dJlJ3Q6Uw9amTsi6DA5/IFXy+67quQ==","shasum":"36da92e593f0d1e24246639a1aa5a9a18ff608b0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9z/CRA9TVsSAnZWagAAyAMP/2p6ljNK9v7B1ILQx3hp\nUgXnAW5UQy1P0b/qsN2QrqDsCl/fHjEEGPJ7CGFdQTr1gQUBn9rfUMXNVoWa\nqMMGAr7hijJYVGjMDV1huPS58l6VzFB+JK6YX3KTJCOMHNv5iRpSWeyBlrYQ\nP5bahj0qhXXVnWklejQ6R2UX6y6pxbZeNkmgvtBg1J42YSKblshs0Bkz2T8i\n44xEAlRNXWFxP0dyc5LcwoPi1x3M0GVeN2vG/Se9zdWYh+SiHlPr+Swc0wYw\ncsLLP37ImBDQPUBn5Gd17zuWu9jvXFAcV/fqd9pdAEQaUJ1Ax/wqBt4g+AGZ\nqXPGioZ9C0q2AneeZWMIT8+me8qfloclpUX51U3KrndKmItk1AEiVP//7Mim\n1i43GZ6cIgOyv4jjADho9+7gsVgLrwBdldhQcwXSaHlFwR+qqDe3LV+wS61S\n1UDq7up3ZXDK/Srpak3aDd/UkDwtDgOUnsrC6e+06d101anO9pSLm6d7Qn3p\nByHgdj4/iSJ/zeqJm4EtxatHe5csyYD6vyrXynhE7df/3xqWNVt1W/O8+uWK\nMalpOg22LxM6etRVa3wPXu9qxZgqfGJrPAbkucUxAG8Yh8lNSyWfFq9f6GVK\nmg/GhdDZCQGqTGptL2LXHAjojrIM3MQbvE7BiH1cLQWALf9y5g9lTlFpe2De\nqkBw\r\n=0wdQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEH/hRMKVhw1hps68nNUKfwUisWE7JFZwO9vFdR+fp+DAiEAvd2xZ4f0XIFfb+AfP7ZyFs2Q/scPLOV2ANgN0WFZJoo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.288c33ec.0_1622662399252_0.44620199155233675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-ripple":"0.22.0-canary.7eb7ccb0.0","@material/switch":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BTx7Pn7foY2M8zPKKgVy4caIoIFo0JqZ8Dhe+WJjCS5sl9Zc3F3dERG88QdJkS+cfeqQ+Mu1opVFHj1MFCud5w==","shasum":"5d14c030e6b03579e84c117099ed3135b608b0ec","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOrCRA9TVsSAnZWagAA0LUP/Ajr1McqwMBrAurm2Vty\niSEVc3XhYJkM5/9sEk8Wx3lG2s7mOfzxyIL5IoX2IGeTnuKjwFE6HsHt50rI\nf4YZ0sHdXZ+VG5HxRcs0TsvbpBPc+wqeC8UHnHEujf2FjZO8SjQMdO/XvMy0\nCiptbpYvZj/oOHE4MKZAea7UIHZCZbES/57udb+4Okr75ZY4G7WRzcqS8XCz\nJpZE8GakGFE2gOhwJcmoAzqbpHlFD/X/EQMDmstj7FJx5W6oZjofDU9ZuIGB\nZ0v+INwN3jsFZSK93YmBsoqnVAib9unU+LlrpkVluje9E+7w7IkD2tspZI/A\nxwjA9kKlgWsBLUoSfg5unAryPdw1UXIkNPRz4vsCBqvSK9y/rAPOwdfQx1XO\nWQbbrt2405X47zF//3JOLtIeacM2g6nJMHpj1D0M24Apvg4PFNWHC6jyyGsI\nSqB072/KaJEzMDUQXV8mVJFqblHFnITONXtGTFNC4sOY/tdzwDLv8pS5UPsH\nAw8TDKfkPrREbq35pmxBlmXXQppHySelWhZhfkFSOMutuazjtGFbgVekNnmU\n8+S/0av3+wJV3hrKSweRVdxZZ4Y53+zq1VwLw4I4NoUA4Y2xZQy4U2dBbCsH\nlhskjy08kAPTBUha8LHnPbssKC9HWMja2GbRJkW2UshY8f+PtGhoV7aWphFi\nB6jd\r\n=V1V+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFimYqmPMDMYPbBcJXQICtLUFJI6ozrjrGS+bBH8kD6AAiA70l0zNWd11En94UCUPkyiesP7+uuzijuqTqwueON9rw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.7eb7ccb0.0_1622750123393_0.994601294673864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.7fcc0726.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-ripple":"0.22.0-canary.7fcc0726.0","@material/switch":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q02oer9pDp2SB69YR7QBUDZPaWL5EXXdzXb/ODXCe9AH08vBX0Meds1iy+hRL0S+XWwhc873y7O6vPKIa/7/Ow==","shasum":"057c26e1d5bde9b2547444416765cfeef3e08451","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr25CRA9TVsSAnZWagAAKCkQAJz4IVvIZNR2x1wXs49h\nnNUiUrs5hZP4HfcffyG9eQ301CP9+JzhNSzmozoWR7MCgjxpvduxQTsOZM/l\n6awirjDEyuCPJGngh4lPRyZREk6ieTK+BRUxnBPYT2MqIC3aq9I5ii/+t8SY\nM53W0kb1ZVAZXfABFN+CkxR8dBi9oBNQ1Y7ExkkUctcSpwgQ8qo7D/BRRYBN\njpV7IKsW4uud87HyAfdEON3oXYPEDijRHtXGmY2lUgQDwbcFxQ0j+I8/1xKF\n/GE1nGfDwqTIIunm8vfDICQOaKdMvQQeWlUT/saPZ6AvCGmqXbHa+zal9GLk\nVXrWTjOi8jzwCmMkv+dcwWWPVjuFeM7DLQDGYbt72uFVfldi0dxiB4wJr00Q\n+i4AMZiK8wNxJABNr9uthwU/E+V1gHsKRawtsBg0zxHcxHYjWMOBm04/qD5x\nZcpLTmX/PhS5tOhbxXfh+cbIy0pUe6nxEf0Hf3w5xROIrMlaZqsJo9sBwZpk\npA6T9mifDVFmy2ThOpkZJB3pcPSrS2sG7sP/koKjPWLZ1UsuRoj4Og4YB0ZN\nl5tuDPNBnZB1XeLqP4dcpoBQBI0b4AbVq2h6IBk28cZ7b9orvbm/qI4Ges1A\n4CZO/O5PPizU+PWDQiqOo5eWhY7YyuPFkT0C+MXxgxCA+cG63LiAJ1I8kRC1\nzESt\r\n=EWET\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDsNm211FQrWTjDVjuLB/UPxMPwUeZxOwJAJaLfBFTOAiEA5WgeML9gY56CFXfG1lyc89gShq4/L2rYLLkOBYuADZw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.7fcc0726.0_1623113145277_0.6338461299228768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.220a4e5e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-ripple":"0.22.0-canary.220a4e5e.0","@material/switch":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hmiBJjIpbltjWYjMyV4KdCT0EsUtbzBQoP6y2N0IkaUrMFS6c6OvW+iTyg75UdlRKCFm2xGg34KuTiRO+WaU6w==","shasum":"bc5ee581ce0fcb62de6cd5c97b2d13ddfb5ae6eb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63gCRA9TVsSAnZWagAAnZQQAJxXuOxpBHlKnvb10BEb\neX0swOpuV1+tfy33ZhWFrjEbSmnOdKkcbl/gjQv2ijgI+ZACP88/ZfaMLIiS\n99KqqghcRSpWAREbO7UuNTtb4JndN+MfwLmXZbekw7c2GYN4cP6V2pUOpYld\nD+FBUWAmVNPsPo8JniJ3+edB5lqxCHKXWXWPDXypy3Njh31uZT4o61wPiKIv\nqBzA3Kv5yFwejP1A+VKW0KItiRPgVgi/gXduPjEew40efIez+0Y8PKRxGVMH\nnUVpunSEPbJ7seavnpDman1yuosiECj2gyJs2P5kuIt4eDOBGvpeFLPmg0L/\n8wQQS29m6kLYUvvUyonss20rFPqM32SgH6ey68nfz7phFA6YG+Hk6uhHp7MS\nsbYZNuflct3EfD2gQtq7vgwWD1/CxnNmS1Pra36ZEYfeN8z5mZJIO8rT+Wm3\nDr74IlyfUg01NjE/JQi7ceIjdLfhVwoZIv9vWNGG53MxHa0lKYqgQ2avfvBI\n+oUR7sflQDnC7UM2Ncmst7Qcmo7et8A1FnkL/7zL4jz+Fsia4JdHY25s7Zne\nMYnq7t+XxIVLALJ3BQ12A+F6kq58gwEnqusY+rI0lgCiSbmRA9icTu5j94FG\nhKzTRo55hdXnuhQ9VhN1fx1QA6nbzBM8BBgglKSGzon/GYX8e/SeD9ifUGzF\nGREp\r\n=vUBH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6h3NXJD7BfxRwhETly5+FWKPdyHFeA/epFRe/uQawfAiB7UfMsCni/LO3/YvsJm21AABhQtKHpEze0uRdHDU8Gdg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.220a4e5e.0_1623174624203_0.26894505651267053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-ripple":"0.22.0-canary.6b2d6ab0.0","@material/switch":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pTq61KUn1GlXLgDpd1xHKI6Dseo7N9VvpS9JuDk+1dwvuVt9Kr2HlxstTRfwYFm5BjrrKg03e+bhutkBG1UAJQ==","shasum":"4de53a39ba12a7cda290add16aa8842e0bc412fb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jHCRA9TVsSAnZWagAApusP/0ySpHo8sTV6x38xHnN+\nnWOkOI3fo+700Z6hw7eNDe6uIdTXpu117vZpCZjg9upr1k+dCmfy/ONJakhk\n5QsqNSt/efUM09dbslFSGzl7nY8YUOj407b1Vz3Z+EI/x/VPWR4jnchxIYSB\nOmSeBWU9KAqFW/6+UVgxp0DtfeRhFm5yoR5Z1O1Uq66/LDB4VgpdHJ+tVXQB\nDjppUyIWGwgQYKuZ2sIVKWozm0xWacVr9CwWfeIAH4DtuCtRc6otoemYswMT\ncNsnk6wmqoFKprMJIzkOq2Dn02XMF+F3CC8GWBAf3bSB1tiZEdO/ObXzDIRc\n5QET4vCntM2MLlXw5M81ns8dhXDBybFWDtA9b89rh4zgGnqPjGbwveLLe5ut\n5Dkd4yhWEY/OkYu91DprNJ4KKk7bUlhCu3pHyT7COgiK9lAVoSIEVkGmxlnz\nxDL4rye9oCnn4D7FmZk9+TF3+H2JfrK3XQgsvtDCm8xtHTZ2W/rzsviU93qj\n2Dre0CmvCjtqMOhqBMFhRh4JWa6XY1OBmhUH8spJ45KLiDEjZT0MjxzzZEsU\npPCnu+2zIyH04c32hUHeVL7K0ypc+Sm9VrsceOVWvcupef3MKhE8iNxkzVt5\nfDOT3gtXEWUA6u/sDpcjIRg8v1AnNCU1dmS9h0/URodKjpx9Rr3ojrMXhMJ0\nutUV\r\n=pf3l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKekn9WvvFLUnsyFJz7bs+CkpejaV6isXGcCvxZm2/JAiEA/1yzy+852+3Hr8/xOb5aFjbYNNqFmQR3K7Pn4bJTZMM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.6b2d6ab0.0_1623177415013_0.3843927317565332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.2b20825e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-ripple":"0.22.0-canary.2b20825e.0","@material/switch":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8415ae585.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k4zODVmEJWDChtdRT1zlU94ToZOw6szgn1AqLNWcYKjDMZ7IZiv6gLyH36kNY56ORdEdVgj9mDe8/yBPbPknVQ==","shasum":"5dc10a2e4fdf75b02b22321994e725a5d3aa4bd7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/Z8CRA9TVsSAnZWagAA6bkP/0V/8SHYU43WDv4qPkWP\nqjIuxtA6CfS6E9haKDyk61MUqSlUQjkC8urD74CXVLkIfg9v86g/DG2PHBWq\nhS56E2ayCiKXZymvtsqFg3sKkaBAqP3gcZu8w8cH1NROo7r5jdbCPFqRCKsu\n0fPoUUe07qNg4OjT/UKSKf1ZXAwuykyfEilRMgeMK3kdJt+fjbfmAsE+4Smh\nFExMB4WEeGc7QlvgmJ2q5doA/JZHGEhTCbTO/GAQbO7WxTCriC0oJUctjCmS\nbhFYG1TgKnkawgOvfZbECKgMSYEstIfjB7HMNfm4tFZS5eOSWxQl6aTEnzzM\nBsOTY/0/J6l8tukTuSIh4KaMJ+F3Npm7SvJDS8s+6TNR7c0BbyOAEXt5sX6v\nF6Fm7lUZSSWEhio8HtHNmU5FOy+3pXsFhZ9BnWgy0SFZMwSQO9F+TH+vmE4J\n8YSuwhz6mXgXTLqERyuCBuUF0m82qx+xulxoOyEGiHlsgepkwBT+ZAezH/3n\npuIdLunAdvb4WaTAfrz/JPtj24IWSn6NZ1i5XlT55IlzY7PMpS5Plo65ioqV\n/ZW/TRNWSascPUD0J9Ewel/fiIfgCxOvtoDJP/k8PRq0/EaLAquqzFAFbBSJ\n5/i70eNK7BR0cLL6p6iyWkR1em+9ELzJbJWnht/3tiWiShMuwXzvoJwf8tVb\nX2up\r\n=IHth\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVz29bFerJxR1S5S5pHd1PxclGnXcrGihrm9dJyJvwAwIhANHBY7KJMCAhpsj4pN7H2CgZvjwbMd5WeJlA3D/lgmL6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.2b20825e.0_1623455356035_0.31728231198970525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.e1511867.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-ripple":"0.22.0-canary.e1511867.0","@material/switch":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8415ae585.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DS1ar2TjVJcUPrn45vzYZUbjezhwlx1ZMa9OT/I/pqbr/o7UC6+08j/zVlvZS9LAGRjaIVxdMEwYpaqXqYVMfg==","shasum":"ecf00ebd74cba0b7400e5aa79f73ea84971ac2e6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZ9CRA9TVsSAnZWagAABNsP/11x+KVGmKaAoB0KdZ5o\nTzdeRNXS0u2yUFSKzC58GuQpOZEEGJ5ydIZzc12YoilrcA/muKOj/wiLflYc\nuQY91NPDGgDs2q2ZR0ecYVcgEmKn0b2tBqjoVvYfqh0g/zfSwZpz3yYRcoP5\nAwMaRYTPl2GaSEATAAHN0PpdcNx2LYRhsDL5Rz9EX4xv3U6Ot69098XsCIgA\n4G03JhjBmoazegjYhQpemCSPBj2aVhj7E909fgMiLVd3UwEVyrkSAY8CqTvK\nC6hgm/1MRQwJSnx2kvD1ZnGu0V188UQCzyMwKoZYpMH2NSmaNup2xzvDyBCx\niGIw4Lb0topKQsPE0f/TAYDJ1Ij0AcexF5Wv5C8zqFJPYkGCKDPjaCaPqkh5\nC/DA92lpExDVgMNh2iM16TrybKij+1PQCfwIc6r5fOXnxhZSOMJL1c2ArCm/\nX7xF6bF3KF2Nm8MLv1PQedABcapg6MDazmpa0/ZkDPsRoGFdOynOCTemeK3C\nQXycCPcOJ9KhbTXb8+sQmQRtZ8RLgWmUt+7VakNPJ9StzgD5Wh+OJT65XpiE\naiDVGBebVGAcYs0ESpskTzTbRYvDurPpBA/nRF2IERHB5tTx8dO7Rx2RNWvc\nSvzZeEacPw4uiKB6xUlvYmjX56IwJGCRsSVfZMPZ2WA4Pdnt8t9VoV3FgBih\n1ZcD\r\n=Z65o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFt4CG6jsQiSfduiLPObKnaooSZBvKHs18Doh+E1ZOUxAiBLuWYIWdPd8GADlJUD3aVucMhQVnWuoq4BSPqxCVteQA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.e1511867.0_1623459453586_0.667529878485329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-ripple":"0.22.0-canary.ef4a0c0d.0","@material/switch":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8415ae585.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NPe0QCg2ltbCmFgpbxExasJlHbXYTeT94JegyB/HtmTz2dE7w1CWRLEQc3p1mGQ5IFQfWHgQcCOgRuusl3P/7A==","shasum":"c004825905041788f789d49405835dfbb9423b42","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQToCRA9TVsSAnZWagAA6gIP/0/6nCEpoFItCWmojjjT\nQugF0dEtSni1nYz9/1CS+oMIGaztZmzqUYl45zYRPFqOLapfHpniDve0lCJi\nzf7Ho9f5IZqITozuttdLcptXn+rcUrQ8dncRvKsduy6QqU33kTqATY2rhX5s\nIvngfPZ+5dq3N62vL/l9lU6rHEYd9NHvhgIQynlH+UM+VMNToWPE4EH4+Qrm\nDHIxj1+UMkYqI/R3aqMkQhgKVkUcF+hwzvL2DHDDzI6zgAO36Vzby8a3Sn+y\nWs5OfEZgis5XBzh1D09g2h8BbDp9roTYrx2Cs1+ZIe/31EvsVIy2P4A7mExK\n22rSLCXJhWvLPcW/vxD0tttm62dHGX+bzaLkxDPZjT1ma3WWL/YuNf0iynxo\nuIzOa4FQazsocnxW9GOCNgJfQNBV8GcZh0fBL0phkI1p98SZ5SFPM3noZm11\nj0c2kd/AhGQuarEQ3YkBl8gYWx+Q1NmB0Q4P6wbmsg9LLfg+M+FIVlALhZsd\nxuQdWcNKAcNiclzRh2fl8EjAwWgnuU3Zqst0eNuGzfy8sHCpWAaUudiJ6iGL\nYeDuJx1RI2OnHWpFQGrhu0YuZiPSl8VeTOqWsK3wfBNJ0piWcImnFRDTU7WF\nWajv2+U7a9tnOBN3b8VcdS+jIxapkBoNiYpdrMQKDGRBSIPnR5z8Qh3R6L0q\nH52f\r\n=AnaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPHhP0+BCuReo34iOsVI4mdtU5q1kT8yXv72L+fRY+iwIgJuc85J3FbaK9tB7CBruZ/B+G6QntIuBEXuZepgSNYvo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.ef4a0c0d.0_1623786728539_0.14194775169146556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.573d8913.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-ripple":"0.22.0-canary.573d8913.0","@material/switch":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.f705e8048.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jyLtNM5WHkytXJGPphvRrugNEze2bGYXVwzqQ542udg/kWIu3UP9Hl9ggow/uOhED9tBq/OIe9FFO3NAsrSVaQ==","shasum":"3c1c4d72902e60e373f4537347d8e4f80149b287","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSvBCRA9TVsSAnZWagAAb7cQAJ5Q7RUXmPJuoaS9D7HV\n0lI2bnjeUWg4wd+q2slBIr4+8W56U60XU3lUlzGTGO7v4wyryGhBjslntptT\n6IfmAMi8NXmFS93gz9M7c1rkDk8Cpu/3bUSvd6eqnawC6q/XDwVQ7nIzgEaS\n2vS0A6Gs1fBaNA8ODi7gfspZLtBMcQWEBAPg2u+OwhJabR3eNXRdMfgvWC2O\n2BdlRwuf6uBQZONPNglkP6cxSeCUVpjCCpgbi2HXkeAKCeSjSpftTHMFwuQn\n9+p4s7yvTbm5Wn/2SRrowvqazvg1rSC7Ve9+kxDZuKAeAjMKJaq4HBwtNhqJ\n/KjXww7rV4PDqPlHaaiwEztaDl4qn4xYwaJ/D8HAfwz6rUr2JSm9w6rwIvre\nTp3k+M1a/EwJHfIBL6/TfvzTrvoMpzGdhuejGOY3sO/rVJH9IPqfGebiMMuB\n5SK/fRQd8AzS9wRlv4OLEAI5tkopk1Ty4Ntgd+tC5GsxA8z3Cr1ytk1l/BvU\nS9NdswjjgV6tiKDQ4ALngyLlUiRxcDVi8BLTWZYS5xnzypdhGSDgrgrWy74g\nYfqfHVez9h3WuYuBm6vAtwGWFHTXwrZ1BkmmNEgDCOE7RJC48aAVPwBcKXul\nxNu9JdVOFX8K01Wie0HGOSehJ2ckQgAWvZQdWcO2UsOxum+JfqQTMwshEbhg\nLVgD\r\n=bAWA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHX31zr8+J3+18BNm9U2d44Zf0XKnsKv0tA8buVpnAoKAiEAhDWTT23dgIia7u8dCUsKaTIwYAkOLbH7tTBVTeW7EQQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.573d8913.0_1624058817337_0.5235848036401063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.21dba001.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-ripple":"0.22.0-canary.21dba001.0","@material/switch":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.f705e8048.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1ulyzJz7d/81NyiMmUgnw1WXvOAMPDq3dc3F3PN9hKbfyTixpyZAocA02CY9J5z59yHvWqORr55y/23+PeiVgw==","shasum":"c76733780bc68d31677043224533c452be91da48","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdhCRA9TVsSAnZWagAABV8P/RIgsRGnZQVyNiZklKnx\nroiMr1+jl6SWTSUvlh717IF6uATO1vDAkfgtMDLxXrKAj+HZm3eM1ueVZK8j\nEwDCi0vvu2TWywYCtjFJ5bbQHOTXUbNKjFFJb2qBE/dtCvmcj1y9Ap9LdkxE\n4GDnR89LxPyGwKTZhY1391JhhNnyBKUlKBtyvEu9rOxIvJIHZ+Upq8CJI2RO\nq9u5EmhoBCqEEWfs50NocLimze25Q0r3MoFZtRlecTpedsjq9MHOrWa5iWgK\n81ChYpbHQmRpNr2hPKa2tTkXShSPPqGeOK+o2ZQRtN6+DAoOFcRGLzgBRLau\nzl8HDK/r8GAynQrb1vZ5k5pocIy/4/OkHnwgc0eZx0eIVLin06TLEyN2oCgZ\nHg4nBm+pCpO8dS0F7PCXHWAnyQfwS7dkUyqA/ohTyvG4YWmHi5fMybGW98UD\nSvtNV5rdw8mmhaVkb/twL1ph9mfBua1LFKVj/qqMuyAj6H3lkxCZDcXmEyTD\nxuxngas78r8xZ2nSz/43tkwnsrDBMx1ARMaaS4Bt+EFQ9vtjsGZJfQrQhmaK\nlzbUFW99TRo1VJv9E019gBznofZiDXr0B9ukDdKBuNfgmsiKU4A2IhMCeVTB\nRZOa2n6xo0tpkZVZ7+kudc/EI7giWLiu3MkZFYdsHfVBo2AaHa+ZPgDruvWF\nojPo\r\n=5K6W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGC0uJAbQLrCkYvQUqNd0Kl9w8eok3hmo20/cP7njeWlAiAKpez0rzu2Vo/EH8K6W5K+wdJLQqhZLjaqNRF7aU6sYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.21dba001.0_1624311649168_0.880565077921794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-ripple":"0.22.0-canary.6f5bfd0f.0","@material/switch":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fqPXZqppPTUX9bgF3B72+CRGdsw/IU5ihGgwZ0o0RcTaBSce9/DLf+HnGDl6IPTfQXUe/d1rORJjeArE3SDDFQ==","shasum":"971f98f07f782a1902557e4101aeea04bfebd381","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2SCRA9TVsSAnZWagAAn0sP+wZqbZxYa9rL+b/JhxE7\nlyPonzsR10ufAR7bHV9137WuNOKbDCr+Uqes7I52DAApcuOQDBKsjR/1BcNY\nMVgi6PvDsLWKF0rwrjhrTcoECi7h9nz2lK7jwc0WHIHVPmaoNC/K/qu8zBmU\nlqsehn7I53ySUOkAAQtbQYOonyd3g6xk1KNY5DWmqf95OnDpJBqFYBaCKNDs\nqVQHwKh5O5EIN/5hKavbi9/iBhd/QBKtkHVpy4TopUxH9xZIoyTt1AxaaLjQ\neZZQvfmLbFlhc6vdB2eB4mdhTk9GAZoYu0lQUE6G4a4AsE00FL4CESHbBpoQ\noMn+VIQ01o1EqwM6q+LDuJwlblFHxUOP6ht0SkHcTDo7eAVxfcTYSJs+U0YG\npZBLKzSJktWZC6oIkxYlB+opWqpD7gce0PO6cDq5OLmlmehYtbs1Tti3ASes\nyqaEOjFxtiqC+XPmtyTPQTE7faxRZd0j0CpVTGisQvZ66XbAZXjB0fg1oLW8\nwUFPW6qoIq0ivJ99O+1MA51jbQS+1DeKLyYZ47dvMBamsR8fdutB0kVOODyb\nPwpwZCVPsBotCsdNO1cUH2PTLbiB55kTAzrmXS22IERUwSL1XW3lIyXsfe2X\ncyHieG4myv0e+lF8sc/Eai6sshiXeODfZ09rxAxAi9LcWUnwtEQzLVskCLz4\nmJM4\r\n=ARZZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBTg7U9YBWTmNkNRfKWHtwDZVuadGoTjfyhcFIjD3BNAiEA0jbulS0FUqrO2kwiZ1pYTj8Gwwg0Wz4efgcMqALKk/4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.6f5bfd0f.0_1624575377676_0.573006311072765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.fd8360b4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-ripple":"0.22.0-canary.fd8360b4.0","@material/switch":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OsHjj+Oahjgrrs0Cc6QSOzai+qhYVb99jRTwZHxR40TK7KNtto+TevtMnVKu+AqLtiZlLamyk37QE3CyGKQQzg==","shasum":"e55785b4a37c213bae228d0f902f98b6b6785e3f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1injCRA9TVsSAnZWagAAA30P/Rc5ldqkugiR609glTm6\nnDqly0HXb5/GvFcrT7woXTgVq5fe9Hy7mZ9U1cWUpDZP9u3dHoRtcx348l1e\nZ10taEy2m+6ykVT7kzQrsAC5tbF3fVZO9a1leK8jhNWtVQlXjLODDf/sOYlf\nFuLWzFAd2nJ3QQ/1dnaiFIeTXpeUhimZTDcAm+obhDEfX/d6FeuH3QZcAqYB\nsKSqJPGV1joWsb//iyFVvGW6eBDhv6DvfAcERxvPyoWNddMVEWOF5ECMX7bP\ndXH0oDyKCnPsZKsbVDePfc0xOOhWGPfLdli8vszwQwSKz6OP2CDlfRadn0y6\nASfAnkRqPvbg5blTarg86Oe9VkElWJk3UTznpG4J9ymWWBBPIJ+XhnkFaJ9a\nZYSUOnbyNXKZqHJG0/QaS4RJKlJhu5qr3mTjQIssDOWGuHRgovR8k33F5jYN\nmyjkqHS6Fdbo3Y4Qk3Wb3eddfZ4KbOunVFXCfGcsxMj9UGY4Rh8RVgWzDef2\nbQjP9lH4TDibvMFDXi6lVHhXKZrBNiGNUyOENlHij4rr3IE/BU1Q1edHJnD6\nFHu0zrrW05JGDS2fP6YPr/ZFMf8Nuwl+0fAeuRDk0FHb9wtdazpcDN1+EIG7\nWba4lLjQR75J8HdOSn8gfuRRwrtkJLKl6aGnO1dnYE2nw08ckGQz/W9LasPP\n7SRM\r\n=Vjfd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2kUoVnxBlHdeHcttAF9qeiXTXZgvvs1dm+uclqo3XrAIhAIGFYfUQ5Nw3fPmO0soWsYgqND0VC0LbXM9EUnJtIv4X"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.fd8360b4.0_1624648162823_0.5746963172104336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.6f74432f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-ripple":"0.22.0-canary.6f74432f.0","@material/switch":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LBphRW+cmkKncd4m6EpiavGqyBLxwBebUAGry1eU7YF9bfxGkHLb3x/zieR/uzZzwbp7uKq3+VLvIuKngakkeQ==","shasum":"d9f1fcd682a79fdbe0c167752df434c3a3ef1826","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDUCRA9TVsSAnZWagAA32wP/RaAB7Na9+7KaOmf0zfK\nLLTkZe6M2uUxgP801mfg1wZz60LXH+f1BWys7Q/eMphcLWyu8LAAvaUu6H9s\nzTVj3+jp8vpRXyzkDUgCXTcbuDDaRCuwiGXR9ERKOv/ORpSahgBOc9EX0JcJ\nSFuYhlDIXIJXg29+tRQ4yLpWy9Fbo1RyHXpdKa4HGr/Q3RvFhaxOUWd7kXQh\n0jF3Ldh2c2h0t/WCZUiWKrFCQDxVidT/vHczEJLWgXeRfmqkR83Etz83+kQc\nI+uiuJnbOhQAr8/msjL6F/eoL/STHW/PqiVmQBn89bHfRLw78+zPZB2orI0D\nzi2/m9NRbNBWKvHAO4Z9PitbC5nJuhl1GNC3jORUtBU28TAG0QJl7YMJmaCa\nLN9RsDvCENKog4pYsam4Xv0cmPuFb0ngP9MK3754/HXUjJB3vhr2b2ApQzIB\nzFf/wFHjJtmjVFEAMitw7m/mEMmvUZS48cf6/JS1WH+rZvrTTTXWwQ9eV8rS\nTpGs3qcdi5PUMo5evkywj2r8Fg59efnJvkr4V+KA62KrCL9KnT1mS711AiFf\nXm04uhexRbNHTOpc6xaIWjOgOxw0cOXwgCYJDq0FJeKTqAqzUGUndaClEK3x\njWi8wAdR8azBpWfSr7G5YROPu042YO1Gz73AAtQKXe8vv5dlTJfZV9QhThvz\n0ueS\r\n=xspO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4/hKZOP8ZsO4VYNQroyQve7DDMLgIvRd1K45YuxwePQIgDOo1WVRAqTHQiXjaNR79T11FKS+nbhN/nD7O4B8b5Wo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.6f74432f.0_1624654036375_0.44251371159007435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.b62f901d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-ripple":"0.22.0-canary.b62f901d.0","@material/switch":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-60pWlO0dqH7IgIhjX6SvuG1/efmk3lAVKbAH1uCSOhjv/d4wbjXQqpsJTTGbbY0sfaiWS4h8GIZvW5t9St7JPw==","shasum":"86a9d0396c9f672f0a5a33e9bd5fe431e895b60a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lX5CRA9TVsSAnZWagAA6CAP/j+wk/d/wPvDUJk0pG+2\nFWoUcamjjYIzBID85VZ7/irt3hXV5147gSPrrJfrHMvd/1kC2KktzhmGsh//\nUqeOeFUsylQmNoPhj3fwo/H8eoBdvDiOsXwHGKXytraJ61epC8bsu+2cPdH7\nZz5BmDPdY/Yyo00yxeB/xwqm3d4KyCDzkrU20XtSVx0WHx/TXspElEqfY/UZ\n0gt6j+7a22v++3IUEKP9o6lk3v5zBqKeYKCY87J/ibiu/aQIuhCJE1aomIOv\nxu/H0ZbSL3OhTC9FPlExel1wYGVqD90IiIyi5r1mnuTP6p0slK/wr8ML5dUc\nyyqZoixa+uWVE0Ms6eLS1rsc8bIQ+g8ksIMu6OKIBfbP/0hKa7XRVyAJhBhV\nQSsXvv0yFvEPUpuX/cpKh57XxWpb/QBi/Onc211fQ0IB8ChRDiypGYZbfO7w\nrc+dZzcCfSyiejBKCXER2e8VgFEpV+A/dqmXn69aReruiJWKMtY5Caqdcre9\n5Qpcx7YLI7Mu+wZkTdGB8KOaXopNDjaBPxXFD5PzogrBaJ4I7SByXleL/Jr6\ncdgHde8qpnKa6XO1dQh/EL9bWh+xfetD4zJse9HG70ri/wusBP7O8YwkEXxC\nPLuDhHOFn59xVcQr8S/kGO8WYhFA85Arae8u0uZE8Wm+W8U4Qm7d3svLjsEY\nl/s+\r\n=yPgV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKahWbWaEoDUYvKjDU+CqDZ0cajESs3BnVaXthv8nqxQIgfbvQEdFbimLhZ3e+ZBRU/t1uMym4Z7RHl7RFxyAFinw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.b62f901d.0_1624659449462_0.27596388122822035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.73122cba.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-ripple":"0.22.0-canary.73122cba.0","@material/switch":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZnunBu5rKisOu7kiOB7rvpU/yQIaMN0FqY32ddKYs402pCcaC77QjlIKiPXmvmycoCx60pTMuWZct9HqIFkwMw==","shasum":"ebf3e90a323dcdb92e2afc3150d43b6c845821fd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfdCRA9TVsSAnZWagAAvOQQAJ8BonEOlqU51bPQNn41\nLT1VuVhxJNszKNgUAJEm86aQJjqKSlup69KwzYgzJIpxQGiXtYsgui21FaTY\nJtvjE1Y7zHW6J+m8sGOP5kRN4J5OYSA2bWDKHNPO0fwAjdblEfeg4zagMZIo\n0RnqvDMVSLktYngrG9aoW0mK2EF4FMyVaf5PqZXnhtrYjeieeC93xGMXz8mu\nddklsqyoSgQameE8LE2a5aw+Y13QmIckByMiiaGFGzHZJ6ihCXU0Fffyy9Gs\nc4neepr+19dTs2GwoUPlU764rnxEbUA/p07+Xa94xbvxi4SHvxujCbYwV06H\ncFjNmNlkwMXeoyzO/mhwI+793Zd087MyzAD6CDY1/+jQRaDS6YAxHYwSzdM/\nmsm7VXD1QBDKQ53QlQJNyHvrPw1v5f5gtr1fKygW/rLxO/To2bz6pyWJ5ljb\nDIckZ1MgIqenanB/bkoEWHxy0asUBBzKcKRTMELjAT+ebA4WGp1NGQzgG/6T\nc1N8GdqFiuLG91W5EU7gdXgxBcKQkQSpi4dZmsZr5Hr7oXzj8eJV7w6dymvU\n6Mu4bLu8uMw8+FKpP7ItjXxFIqrv/1IuvqxnB7T6ml1jG9JI/X+3edVaHomz\n5p/hoAlxCASk6O5+sd2wiIF2Y5Mv3gg8mY3NOsPBL4/O4FHpQybekSF8AuAY\nGHaT\r\n=r3aN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+rSJL1ckWrWumzDDuadGD1efHrPgxISBzanpxEwW66gIhAPE8H59fWs5xoUGbFVw3V0yyGnDFhyTRI4Q+5woqlPu8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.73122cba.0_1625081821276_0.3562953540363001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.a6912af5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-ripple":"0.22.0-canary.a6912af5.0","@material/switch":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6+KHPk3yzmh+O+362bp861NuBwd1WlpXrN3Z9PERGiDfOIn2lnJ1Qzb9Ard1IuWl0yuRyDGtikZUM2udZpHWlQ==","shasum":"d9478f71495da4f6cdb53adb26ba9d61e59571ad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTaCRA9TVsSAnZWagAAtkMP/imr3BHe3dF6h2SVWD0v\nhLmGGwxR9nhAzN8qIcDZenotvhxchP7uW4yxNijUt2UUeKbY8LQ6alYdBs/s\n+R7UBSwd3YxlAzTQ2iMTtdbE9gPYJZXdzG8Dtyb6ZK2UVJ59NtCp3HeIhLvp\n5DZb5I8xv0v3DWtA2sSUBs+f5nrQRZhuoy+cgaHj+HenqpkBOqHLGmox7tpi\nAewE9I1t0erSzN04O+7TylinYzoOsB02zszk6a46HpBiwbwQnMTosPSrUcJ6\n6HJfm75lbaw+JmPZj+hIV6eq850rvmHDbSra5hFsrEoDXx1vW302/Zv4dWx7\nYRE9eqwoXlRiS2iQ3fXfpLwVMFuj6ghKrnRtDDBDMlXYNuDJfMvWl+rmbAaR\niikkfc+RgBYljL+FL9WA5UsL0BTITMqlRmUi870Pjov9P9FSM215GlGnxTb7\n/vYUuYKYXCPvuGXOr+HjxBX53p+fheRLtS0AHflifuzjki5vKzyyolJLSuxo\nrqelcG8qGGjPuF8iDO7+yKgLbQyxwepggl0cS91d8fQjK8/WQqgobjcz18qs\nYgP6RSQUh2YhI3ORi787eMM7zo7ZvIImGo1iqrdeNZ8Rsui34R0IWcyTZMy1\npuuDbOVLhpG2vGEQsjEkyYy9DLobF1K6OjxCqB2k/2uuVun0R+fnKmN9J/Zk\njDAu\r\n=EsFH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe+An3m6IgSBcDm4wTZe6OLQ6w4FOz/A/GBU12F6BfKwIhAO1pr40MRDuDAa+gTZvYKPrs1UtkrrNW7DvY3S8tmMDr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.a6912af5.0_1625175257623_0.15472243412445708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.134f24bf.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-ripple":"0.22.0-canary.134f24bf.0","@material/switch":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jDJi+EU8fdxgfaBmrx0vJM+GHEysS5gDvRZ8jq7Fh3NvvXDX2pfeYm2ufIiEf0e6OkkrZPyo4xpbAzuWjEbxCw==","shasum":"010cff7f93b6a0a879ec90a812d2c5167d8cd2a7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKECRA9TVsSAnZWagAAiRkP+gJWrzPqrROmf6QI67yt\nb1Ek/d1/HHRER3D2rkR6YZIE2c2aGb6ijht5tNJEPR06m4w656w6jPtxkFz6\nci/QCO3/Rzv/C4XUyJMWjEXGBXm3s7AjUNVXGvKsThElZ6OGh7HV3/ijl8/O\nsYbyUZs3KzLl49eRpImUPBndr68VfTxXrf7wJlwq0aV03nq/up/YwaOYp6yN\ni2KzTZiF4aPSdbGQmy5XGCZyD8DuOiqiOVzccuakhGI79GtlrugXpWOfqz5F\nBkE3WWgdykbgY6/4U7tdqGEHwD+rvvbwGvWTBzcJNKUVnD6s+T8RYJXsYH+B\nj6+gHA2VTZ6JrPHRXj6zFNHtAy1k5OCEK1kdvAc1rMWH6g6wTVMYcOhGY3Vz\n1ha6JQcOPqX3vMG3PZWLNllMjjLaX9h5Dq1J1QSM88PjvFMpuclZ1+FoGcYA\ndPP9jAQPAofiGI9w8Odn7Kp/zCOetVvngJc+jzGZflMLle5KUM9lkqAGzyGB\nQu1m1fxz6TRjF7Vz+lw3AP73nB4AjHMMtLCu8OEbXvbocjrEbHuMlEMdltZ4\n0KprvOI5sDBC/0+Tf8fExODeIbygtIgjXExnvVP/wZEyuUzt8XNkEQMm4fMQ\nzkzxaJ9ncCXNeLbk4LaalJNNrjLD5lzrcFKhfl8luoOy6uov5M6mYUlX1Nop\nclfG\r\n=t/LZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLOL+/+xkSevNczaLRByr2knRB2excByk3I7m//qEwOQIhAP7wyZMh/Naik4dPfjV6kNFxle7R17M5y5uYeZXqC930"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.134f24bf.0_1625178756371_0.9304108549502879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.1debb78f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-ripple":"0.22.0-canary.1debb78f.0","@material/switch":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2dYrBbP2OURBlsMOpeMIOL9JR0YGTuPTsjWulenQYwpixJ77AaiNutRqaFyp65ZKzkr1QoESO4vdFHOFTE7Bpw==","shasum":"fcca84a418940befe031617c6ad6ec91b768f6fc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlsCRA9TVsSAnZWagAA0XYQAJqimBn30eI+3oyk42C7\nV009h0DjeqYNi/qfKzpKXhh0xbW96HuP5WSbxhnVIpEqY1LedHblpiipEtiU\nzTNU+7iCiHIvcj8ysadUSnSJZyDUtaN3IyBb5aRVJZmFOdP5Y4OCAJ5MqIoc\nIdG3UaKwYsfpDZduz/Ow/+9Uw5UxPed0QO9riZ5EHp+OPcw6mfmhhQIjTHdg\nC+Oh+4nZGADXQyTyYBHYpb7j7PqUGxoMcTKLAgea0ot92MDSXbv1//nsIZ18\n16vjCNvq2oGch4dnDQK9Gc9IqusdSl0CTPKw/d0VrK4rdAXXBaji82YoSVWM\nH/GY8H95jK7navysLWfgtyZDewfjOnuajTnQbj+vjX2qWyEgrSLfk6fsim9p\nKfof7Vb56mMa1Y/AJ8BXmEPPROy/LWgSIU5Fa4E8+YFvvFTmSkqaNa9sq7a1\nYxZsWQT5uofv3OTxQOhx7aNQ7jIcSd+EWuIt9IwSK1sV/oAJX/gI7inTejlr\naWltaSaX3T+5180EerQaSunXRSt6zZRnoA/pw9od/eDxLWyO4qAU7gOhHqdM\nlCS6EGxEBtWQTYLth7T1Dc/8UDjJtPjWLBxODoKX806Bqnkr/PgBB3wggB6M\nRhs4rCgSQ0xUl+rvZfc3IHKYCnmymq9GLfSb4mbYla3fGbF0F6OQKqvFm8bB\nn5WI\r\n=iNhT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpYgYQA5tPHF0VNv4o/GAUs8/tW9zzbGx7cxd4991MaAIhALQFldQP46oeYbGtNVwLTNJK3C7dTpZU0xxZDvLhnQWK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.1debb78f.0_1625618796350_0.6122544314520448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.d53edeb6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-ripple":"0.22.0-canary.d53edeb6.0","@material/switch":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vcdlgXOyAwVvQX/LTwSnwd481aTtplDTVZn6dQwXGyDKbB1GJEPlxUTK8k7A5EN82xn8ICl9HX5PcRttf2RVKQ==","shasum":"a503dd5e8b7e1fcb6acf20cd50c6843074c05066","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2uCRA9TVsSAnZWagAA2W0P/jYETKwtuOrqU3QHlMoT\nY8M7OvcdKIWTFnO1ixf+BeDqaKaBIJfTM2DtwRa8uEmYqueXoU9luAWaFNAW\nPSieDqjTMilXU3aVStN5Vns/GvBAK1SlUqNxqHei6ddnzxR4LL0ufLQ40Jsv\nen+xIdUkyOI8kotj09yUQyIBn5PjOYjicb/LXJFi43Onijxg6dNU/c6Z+3tX\nlztpDooThEvgyAZ8hteAQ57QQfPzim5U3Of1lH1CV1yTRMsktLTYBx3B2Ecw\nnyx3dn3VUC2LkAPmaEEu4QLSc9LbGaPtRxJuLqWsIV3raxgoIAQ3R//0K19V\nOUdf3qgT3sUNXREAMFhYqfzDMfcgk/ghTrvWkYGsht5kKNrBdS8oJ2rEscTJ\nmF8l1HN1KObt7+1aWvdS7WPnltmqxDKHZpnyQJk3b2daFYItr3q42Gdiztjf\nnFFAS16u5FkX0G3mOYX87qTCTPnqG+wZ1XGDFaeNCeny5OTbp5GcFwy2h19g\nGUSmPiGOaTSn2NTje6EYjoqY9dF2AnI5keuT6cvJgITBFXXd5nyljtTX4QkI\nW2llNHZGavMMlL3e3R8f0z38PZJu1Nl+XnC7GM3CLlaqZY0uJzwMVjcgukrp\novbbLTeeUorAzXHF3hzXbKrgJKCoPPI9BKogsU4vDwrc8pjASYGlylX+/fr5\n9VkL\r\n=HuaK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoXnzl5dO9Mblh1Gf1U7IiyuWT4QG7QSEDqLkDVslb2AIhAP+2/vg+lNbcpcScayV+PfBbGpKTH422vAtxsii1pcPM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.d53edeb6.0_1625677229950_0.28497007273313035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.2226489a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-ripple":"0.22.0-canary.2226489a.0","@material/switch":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bRxo07ojtN4Qy41jV4Gt/b4FfYU+GQnUFyWdY/8ZCeP2DbToL74fERsyH9wceLv8Jv2BljX7zTbbVSLQ/P4eAA==","shasum":"77633569cd3405b053d8697c0ee86492df7137ac","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2KCRA9TVsSAnZWagAA71IP/Rx5s2gejRWLZK7+M1gR\n8l5jUuQcqQyKNo984AiE4Qm7iTDT0z/nPjtlsHdaYYFVlEw10Ql9roiV5x8B\ngyW5f1SLouhyDJgVHXnojVrzq8r8ReBp8jMID+NbSHq59HaIE8mUvxzNerSJ\nBB08hS8IuHu4gM/a/zoUOUwmVCkXmm/FTrYjP6CMjuXDAtE/Z0vMfIgPWtFE\nucr+CbA/NvOpBtlNdC3wsx5cxtv7YHjG7hI1UHHlkkS2xRKUt0XKATSwtEN1\nViENO41crZdKfAFe8DMK7cOp/b254wrsx/UtVjGbBWD+GwIorH7ZjxV4BX5i\nEb5DcikQgFr6a78sapYBu+OhiolFkzE4YH4foDDpdJCt9HYXdS3s37G6BNPs\ncWIY9PWszBX2kFRi1+MfL+SXomUismWZaAJ5a6c4XPx4o961/YYidfZcGMgl\nLEuP+lVX49tST4U6I6v7sfIP8bs8lxvttwpL8pFy9XBvnPgbB0RQrYRLHd7w\nRuGLi5GpORGuBqiQOMrG5sOeYMIgkvmOdK6eFxv5xnnf9es7WfVCDg+mp5MB\nqy4HggeOuxKX5Rw1r7b7ryIZ+gpK+S0YtcVqKDcf7/6OWJVjnnFXVahype7c\n2m+fb6Z5bnsVasNzV5GamelKp/HFJXt7F7cxy2lJ1m3jW4IKUCuQ9sob0mQ8\nVn+d\r\n=zTyZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlEypUkcGx/HBNRkFwa/s9PtR3YGuK/ZCXp9n6qyyOsQIhALMrTD34dNBhWkz+rqqCtHVZ66dYfdJWiW3LwGW4XBwl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.2226489a.0_1625767305601_0.16179139944804022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.d4801c11.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-ripple":"0.22.0-canary.d4801c11.0","@material/switch":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.adeac0549.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v4o2PAUypvnEHqaf1lvD3sPxBxq1IjW64VPuFY16UQtqkRAzHpGbmb546Jrf1Pw0t8cbbjJVvex6Wo2JTWC44Q==","shasum":"148720218fc9b333be7c76fa9d31102697b04481","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51n0CRA9TVsSAnZWagAA8k0QAJvaHqEDGtwkvatcuEFu\nYHaSFjgmHAzNJFVGf82cf62V20PSw6kVfXHZ0/YWKd9C+6g2bnF9P9yhSoPG\nJ5cKDImUCayXBRou3/iM/kcEPR3Ow8podKiG8wwXrV3Hy/zNryBjQkJxzBzv\nZ2O7X00UNH0GwG4LBX7qJBmkZR3SVbtnu36dsqlrNndx0XqtvQGZmHulXN+0\neOqW+8rvppssCTliwWxPkmK8NYKdnbVPBii/CW/MdzpyexFj/32mZhbL7vNk\n3cjFKcBrpDCVFdb1lKste9o5xQ9eKC2U8NxBvqve+VpSZmA+t1lcLz3mTLBZ\nHsU58SSJfM8OFOtBAlgYGcca79fD7EwCyCgWnLTKebWb9eV0DBPO7wL5oGmP\nKKugTRy2lzTPb/IIhse18xhHbuKPzN2pb6sbcv7D5qJUCy3yylPpIA2yKD0k\nUlbqhjMgNQRwadLona3SMxmjAGVrBT/luMAGM959O0yqG/Be9vIZ/UDHFdrf\nnpnGtcJcEAUzvqd9an2z14MPahT3SKZ8eW/XIlBkjaWZV7OZzzrSOIbjTs80\ntstOeHqUG7GszfaolhiA/8zg7Siq09Xogk/qYrHeZzSzFbnBj5JT6OECWIzQ\nLfID6Mz3Zv2rgrrzkujC8YqcgHMxVYduBaiQYZF/08qWef8WldQz9s2mt/0K\nbsuY\r\n=Aoi5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD7zHFlNUwwhHufiHIdSG/vDKrl4OWNiGhfZJrWgvvWQIhAL0bVhKAfYd7tOGR+MA1x2mZ80diNkAdyn9FnUsFAmk2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.d4801c11.0_1625774580530_0.03652974538829579"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-ripple":"0.22.0-canary.7ec5f2d6.0","@material/switch":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.068fd5028.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dc7Fb9Bl2aNDCgVIiFMtVAtxKVsWip21HKqKIYVq1YF5jVb+z/kpiePWTtFMygIcsF1YE7G/UAZBspCaieWkag==","shasum":"dcfe849a34479dd99f433a24a660f9e2edce2e3e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkSCRA9TVsSAnZWagAASA4P/RGm+O4J1fevf11GzBVo\njTISiHDiIh2kQxtHXSr8MnPDtf8lkk9AE7qVQZZVUT6m1D5MdMWkmJLijbd9\n5OGebKsPBOAoTj6xQjI+CIXQRbR+VYktTr77zr1YuPfdP4iDlvgdg0lP/N6n\nhdMOs7J5vC8nJoMakqn98qkX10Wu/fSzG8cJASPE7fmRLR/a68+AnRFU4xo3\ncYdWGXoRovCWiOXt9y6XK77eTq2Tlj4kjNSWRz6dC43oF/H5kRzU4piJ6w9o\n0mhwSF4snPXO5IknI6OGE9wOIAlTqpShUzZ/8LDsM5VdaxcwcyfxXDYb1FLE\n/kmsITybbHTxirc+2+/8Q9En0zLfzers6DF/TCj03mkN/dp8B6iLvEpJwA9k\n0U5MKYdIp6LeLWkjgWdPBtXhXRizcAfqHO8YFTKwMW6rJyQjROzZkdhSdb8x\n8n3ncUuzCHNF0b1RIBxIyTEs+E3tJaAvdJz47fo3pVyCt+EUCVdVVEynKAot\nVOGfvUPV6Us1RIp/VGTIKHMqEiivLIy0WKEEACdZiuMa7qVzEDK6cAxNEl1D\nTFqCifhyJeO1YQKkS8ntxPfbV7vIYq4yG5RBHFmZ3wtlRSNJ47IE9Cj/guuP\nuYl1dmKUiPRCWUcR7x8dYXK1vNet8CtTzzB5OUg7c3GTNo3+fgUicyxHjG6Y\n6viH\r\n=13Cw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNn8wxT9KtScF00JFyZalto9RA2Jsm1hPKMcyxjlkHhAIhAOVS6X/lCj0p3pwX23YMQzzjWLiuSR9uL33XITEke3Ei"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.7ec5f2d6.0_1626110225742_0.5029175124682324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-ripple":"0.22.0-canary.86cb4ca7.0","@material/switch":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.068fd5028.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FuVLYs2xsNblSgya2jXNTBM0wYerjWRjritE9qJhSThNuBs88X2BK2SPbR5Ra5Gs8tGhWoQHCl/h1SuayZoBEw==","shasum":"a05f867e690a3bbdce4a053f875358d98ef71520","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9sCRA9TVsSAnZWagAA4OwP+gMeVd4r/IV/6tBM72DD\nLcUos8+tGfhmjUICzZ19zpoBRsVngW4ikyXomeGX3d+iJNMxmQk1zXnCPKas\ndijmEGCDHLKXoP+VM9lg4HjZFuvO04N3CtYCzPogP6bweJeRBZbHZLtV+dxg\ncgB15xJJFDuyR1sjUG6pOwbW+/tLaubrzPIVE0gUK1oL/IMxEZepgW80HZFQ\nnIWMGW4Wgd6uHkk4kypvN9y9RlNQjsn65ViOiaCm78cPhKgi/ICvJMyttkst\nZBFIPzFHLQwA3XiVCW0nWqhaAOwOP4U/YYTOc5tDJmql+HISgR7NgyKoJhaW\nzJbkQWmy+axjRKSUbQVlfpE1hSdlcwVaN8S5qXd6lcyZY77ldgzRhHR/bQu1\n9vbsojsGEzNTdungwg+BJPr/Qhj3Ii4YPGoA4x2T+EJER7hBIWPd8lcBEG8T\n/cQZ0ALDobA0t3fgbZOoVvVBBLgx6DH1Y6hZCGScmjWUG4/EU1OAWslb9z63\nLHsxMwgccDiLzu5lpZymfDmPPjUd2iCaLj2IJryEj4PquuXllfQlFNP8A2kX\nK+DVd1jNozSQEDxA1mhJPzQlgCxCWJMC5XcPFn6s/y51yQA7oSPLJcklCeFJ\nd0HxthHCK98QQHZL8ttpbUIi1/ZOIgalZYIFOJdrnZx7tDSiPfh69BbkKvo7\nwQ6P\r\n=/eBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv/ev4jtjC0/o1+RjgEcjjDKFGFUYmrAJKb2VtClFzdgIhAON4HwCeI4IPYaM5nFbv+GPsvtS+MaEKhACBR8IfmOLY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.86cb4ca7.0_1626197867822_0.1303897611727356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.bc9a724e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-ripple":"0.22.0-canary.bc9a724e.0","@material/switch":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ea77795b1.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sREqbTmCwXnGZuPOWdmVSiyYVsk/q8Ffudkg5aaJ2WAKKiwA9jUReEIl4hOR0js/BIi+YKL3DKV8DbjSYeDq3g==","shasum":"57fdf23edc3b974fddc829a7e5a263442d2b5e27","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6MCRA9TVsSAnZWagAAd6MP/RJxFOy9OcmdYDiklTjS\nQiBC6zGm+/cGgf3IDtS3maAR0sPixK4GoYF85ZtB3T+PgrRXvBLlMKsUO+UR\nT9FiDLMG+if8WIP9ag8POqsMgACoS2txMvDpgvWJAXvQcnD5WjF+pGm2ouUy\nVLaJMIWYLlKxOqztslfc+EyqFmSUlfZpsBYFGYON+exQnrJ2dGBmvN81A1We\nI6DrMeMFZUUJjP4PqVeb5Hw+e1TnyRr4A7BoIYSdQzYHRZsNUF1JyAqxRd59\njvk+n0v62j370WcrGVRMmNCrvkrGKgE3bnq0b3wxhJ+ZTVWOWdkRD7RBeFuh\nH1EgtjGx0LXmkqbjwbiabQsMyDooYp/JEwo5XZ59e7iSVEkcNt6+26Bw00b4\nn/QXaKsdEN15C2MqJILQ+CTA0zkO2CLstDK+tsWhef0YmF/xW3JiJIaGqJBZ\nStDH66eN+RTW/atdb+eXBqfGAPYfyr8wBiYh1e5bQLjhnx+5/yO1SAdimfuI\nLw/ARiUznt/+s843Fa9a+pKa+aGqsdAYTEdtDstOAEgc54fR+3qH/OpI3JUB\nKZLbDoby2Mjjad+/YH1r5qUyEfSWfQZ0ebO2DrA2qxd5LHXqw4dW5IjOTfMO\n2J9qIW9+1yJH4dHUI7C7C9sKYbNqj4oMKiO6A1MkW8d4ofPf/76riTcWGmJZ\nki72\r\n=MxJN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC79qINg01an1D0GWmnvvE3FgL9GtcCdbYd3sRYRiFxnAIhAMhNH0XGZbsfZqCuchaErxeQR6jQEuFDk7y3e06fL4pF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.bc9a724e.0_1626201739409_0.02165226087384009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.7847b83a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-ripple":"0.22.0-canary.7847b83a.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YMMYzQEF5VeiaTJToyku9wT/bTonbF7KmXhDIM9aWoCWBSMTNjW4ooqr9+/F21OZo3n8G83bGtM6XUQb8r04dg==","shasum":"274287a715accf5f978cb80ba27528f808a34438","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xx9CRA9TVsSAnZWagAAE0UP/3BCTOx68XdHO05Q8pZS\nbRsrS/vR0YzPVs9B39q2Hip1U8B2WNpaBwmdJrH/DULpi+Ju+aNkim+xFzFc\n5d808XJqdWe9BuMJ51FdRx5ZJOa9ZYEUQ54TXyYzWVceVQR1MFawff52PXNU\nOPiceC9ynzLmhle2SkbadpcuQX1kojcjMNvIp6bKMzzRNECFfYEqeX+XAp9I\npJgdWz9nek1Z2adRUbUSxm8/vCf6MAfcpwu5jcvHLhe0YdkgFy88EktCQk9z\nQutHm287zUYhpkVFWVI4bavEAVuTQtk3uTKdrUzKCdeQTW2b8iNBp90BSpi0\nKPZiyoKzqCHq6c+RIEPv+38JNInJATMuuDcHSt79nWdkpf9SIipieULFr9Q7\nPRDJm72avh/zUhiFQJVH3wBPkgQz28iOAcWeCuxI4oNzDevC60hOH12H5q6R\niehOHe810Wd5c6xsRXTUwLMCLSUIwnucp6Xw9b2Lqs7o0FMowmbPRMCVqyiU\nnKQvbIrpJhV/0MneIDpFZT7vvK6w4nSmMl2HAdmkv7caCLY6cKn1pmiRoL4q\njzOAQDPOwltuw9+BOctHcGWcopwN9OfV4FIzWmbAwYkK1hqDJWX+eF0r1KM7\nZPkitQsScHUwWKPnfZZw/lYad2Er1hgackTfewweVvqksCwf2A3p8mkrYf8j\nlgd5\r\n=pddF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0iYvqvHvp5pUoU2qJ2LWlXvxWOEQyZhT8Q1tuj7AufAiACOGNXy2NFRcChl1P2qCB1XGf74y0a9qFmHZWAEDeC1g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.7847b83a.0_1626283133102_0.9727107149975041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-switch","version":"0.22.0-canary.8cba18fa.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-ripple":"0.22.0-canary.8cba18fa.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lW1AEtWzj7y6ShqoyXRtZpA4mRHEFQ4Es/5WD8pgNiMS4MBTG0lQDf/qV28gNzQwvD8NxUH4Kp4ET2/xr6+lJQ==","shasum":"b035963ef2a8e6ad6c6638f1f74925d5d3bba33c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70iNCRA9TVsSAnZWagAAaz8P/3es5uGkuIlQRpTNvcSg\nJ0EYecDYeIIPTWR3Y5EeKl8A2wadSxFtK/hPb2zkkUB0P6l+bYH+QbTtRSTF\nURWOcZJRlyoRaJ2Brq6Ki+Fzr4saK3NZ7yZDMZJov+/7JsSeOZrUc6EeYyKS\nergREYECTBJ63StjyWJVf1HvI3vTLWaptM1EWugnhIDLpkAOGsPLnJoPLrPN\nIaMzALy4F6uqDPUgFW5xPKbnSBp+CfEHpEX3RXUN4wB95KZ8IkwLMeLtLZrv\nuSMgC99lv0J3kKI7pZ/kNAk85O1sGhNdxB1cbWNt3Ds0G0MXn/yoApZjCscg\n5u8qC9qa2Cz1WKFlBaxI6mbFP1MKR5fTN+rWgaxZIUjd7UsvcQk9AyV2YHOx\n3EJ0SYKwc4HSGKYAIPoMn9fR306sptYvxpF/GXVKnkj+2+nihKM8LwfjoOCa\nkbxIKkLKAyH+5K3Or7rt6wcUJwzR2rwSkGWsiD7H7rbeZ39xu9CtKTKfH9n7\nldsWmYER9JQC+BZGkYeXnpULWsIvyrC9jqUEdlluON3iymkwPKLGRqRf5870\nLLo1TOtTjxmQBlNbEl7QsRsFnOpjm1s4gmKuYMbPT1unyAOxi5TBg6ShEhGS\n52+b0q3M9DzEswsUMxN1midD10nMtTm3ygZlrPHeK2GDaz9HBgznBKPHjzCo\nyS1q\r\n=vKnb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUT7UGIkaXxh2pJ+BiOt5wmg4oWEh7BG2mPX9yWSoWtwIgDF68LEGZrVHuJpAwy7VUI2Ly7L7sJlsTNsCERDyR1Y4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0-canary.8cba18fa.0_1626294413389_0.2386008858386579"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-switch","version":"0.22.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.0","@material/mwc-ripple":"^0.22.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-SkYvIOpKrp4QCa8qyfOej4yjy2NvWuJVBCe1IMBY93yVlmfKcsG9VCc7VaBlgwJ7QbHiEIa8+Rxm5ziloa6+mQ==","shasum":"805d081442d0d7aa8efc9a9430433e9e9d526763","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.0.tgz","fileCount":13,"unpackedSize":40671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72d/CRA9TVsSAnZWagAAWB4QAJLVhMszzsSk0VjDjMCZ\nvFWlh6k7rikzUiTr1pr+vWrXYgiBtOicYql/ScqV4e1uvmXrQD0ooY8JSHz3\nhcdaGWfH2nMF0zvWMuwpvYaRUr3RGlMYzVDHqSHlJ0nNSOQjaryPV+JSCw0u\n1lvUPwjbPkZ3EkO46juQ5EmNzoSGjVeQC/uXeCRRAlC6Smz4pTH14kfHVV4P\n/ar3Ip7LxSw1QMjT34DAgu/Qx9DT1JgQxGBNw/UdY1I8xgnQOdp5jjWB1tnM\nO0nVE2amhOcB+Y75sQrrRANeEZjbUkh9G4KVxAoB3mY6PZifhVFzmPMh8swS\nIDrZxRFWluA0pVMKRM/picB7o8ZRbBQ5meY9O5AbCIYjg4123OAkFEUWPirk\nPKOgVCaC2Mn4uRgc1gzhpma45VsRxvnh8GVK7SDbsIDMIGL5gpZApKw0FEKw\nNacgzTj9xCfOuMQI2HC4WpE7RIrUQsp8yw3oH7hjaAe75EqnPChGQ7/z2M0M\nKKwxoyWAb+Pt1B3OHM9yPPiOyu5L5d065HPXxn14uYoCALqX3VQzA1pmEy4X\nMceAE3ErK4Dfy4VckifRKFor0mC/DAi/12hk8UeJ2PyaflQ2BIu3fXzAmbll\n1RLW5AhGEKE8X0pKjyN8wOJ1IP/DIEK+j9594Zknfw31NsgH2eoffe2nITpi\n+Ae8\r\n=+KUU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8Nl16hdeOwDWJyq+JdDD42XU1x5soE2gHGOQcgJnI8QIhAIprNkcvM9whvEW/5hleww2migG1QUEXzvXcyiGzIBKy"}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.0_1626302335281_0.6391553904242435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-switch","version":"0.22.1","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/mwc-ripple":"^0.22.1","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-KDY3uqT2qTEw6Z9TS91Ucs0LViUcMsP1XHu6ZNhbv9Ai1uK/i8pwVWAIGIX9Cm1iCdjiYGfKm4DZLORDb/rfEQ==","shasum":"f66f50091a02bf488e74e9a449da82b23d9ba96b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.1.tgz","fileCount":13,"unpackedSize":40671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rFCRA9TVsSAnZWagAA7vcP/2HduFncDC2kc9iy+DFn\n2a4jP555RoIc2gvFAbs2fIrZUr4mMyAZ/3/vE3UeuOwTzozb5buEGMt8vcVK\nqvaXh6M3cRjrWo/yC+PVDmEAH6WXf8t5xf1CdHIIv5GgoYOhW+D3nL/eWqAw\nBcAZdpuZJahe1MfQiahxxQx8iwu7VIFcVHirZZrBAy/j+wt4ZhIRxWfcnsbP\nrviC6Xm05sVmlpW/Yl4thlKd/Dkoa980irNYKDgDplYlgNzrQ6PwW+SFl+Ov\njarKNUp5KzZC5SL/oFHAvunPheuAcEthBY1APAxg2f2qHxGoUa6/RZ818iU3\nykAj/ad4CUK9KCJQAfylHW34+pKBkzWbpATXZ/Rn21amolzeLYESpCGlgeVu\nRvHmlqsRRhlJfvwYSK4Xq1HAJ8sdyN/I0r1dDbpXzxL3nVcBJcPP2nM14oxT\nVZwpIRZkrAdCjWHCYJOCxbnFZxoWpOX/u1/j7W/zS1usI4iUDVlwp7Wf+CZc\nlGzMlSU/9fCx2iu1bDnXmCc2jzJ6T1x8RuIrv/8Nrnm8ejNVNvfckem1sd/T\nMegC6WrK+BY3nsV7ksZtKq3Fz12p3XkbotqwVDkInS1qpZr0E2etr+oDM8Rf\nyZ8KRG+BL493xOsxLISSNFQVSvtcWy6qtF7/Dj6MiCoq8KkQDmgcV5paBZa/\nsIKD\r\n=Df9x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6nSa43YAQPule4S0NqnXLo1csZLPmQAT6/qmhAXZuKAiEAiap1mUAbSaTZPmwnhZpFx28no8SePqnlnkdW9OnaCfo="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.22.1_1626303172817_0.7622172030629817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-ripple":"0.23.0-canary.fbc09b4e.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8IDNYEjsKYLLf84HaYDa9lEV5zN7LSsDFnh227Zfx5jI0nhvn8eKZLqI337ItrJn2irbtJ4whLdy2EKBVwS21Q==","shasum":"af3a58436f400fc00171eaa9f3def313fe95e047","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72scCRA9TVsSAnZWagAAUpoP/301jD0v5qUP3wKRIcCA\npL6c+Vlx+ojNowpKC7qMy3KHKJsfb5Lm1f+w8rzGlPq8couF0GyhNRnH/5G0\nwmGW3D06IDErfYf5MvEDj2EaNKHVpUZMJLjBEBa38/sVL3wyv2AfQU6l4mQX\nN9ZbplnjSc0XOy8ydzRM7S2OK2nj8mrvBfYPkzN0kbG2392gRayI/WyEjowQ\nUlkL4oa+hLYZz6EFOOCLZOmcMYfREuHn2gKpUL0LHcIUYKMc+J3AJzcuINdQ\nUwSQREHaLVHT37ylLL6CQXa89/lEEMMtbEn9FTJNAaKWf+JPOeCUl34tmJrF\nyHdxksuoY7WagJYp24Et6sBmMLurw9/ckiMaI+EKq7BtNC1x3axLK/CNjaAq\nIvKNzrdqiTHJbbN68le+KKaY0aon9WA5ag2YMb2vacEDv4CX7db4H0TYnNgB\nt1r49Vkcs6h9bjbgGNwO8wY2nuksCYbw7sN2TK4jNTPv6jMHOd2aBYOE5oYn\ncKce6S9Wu7Rj45avBD83Gn6tn6PA0vRjRHOW4dMccafr181xqVTCPwDPqlru\npPRaNTxQTMX2qTL96+b809PhKV9nKArBjEbvH2fi56PeNGA3zTb7uph9SOeA\n7MmXG8SXYDW1x5FZpJ6IY7JjE/hBd7alxUyGB9KtqxXYCQ+oi7O+ow4YQyTC\n61kb\r\n=3DAD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCYZ7zQy9nTrxkejjHttM0sfov5qfE1y2QAChambvWRgIhAOQeKLld6XS9xzTL2TeFFnRNG4iEP9FRpSEu20gHq2nK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.fbc09b4e.0_1626303259936_0.1560730989812391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.73e9f83c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-ripple":"0.23.0-canary.73e9f83c.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Uh6HbykjrSwfvWEanJhjL6uxY5Nwvq/jNsL9JRxFhU3PiWfJVHdmuyJzD0ajysrOh5CLo0pRUszo6qXyivGvyQ==","shasum":"f2f5802fa3abfe3bb34fd8bec77b11f96965a1f0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.73e9f83c.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0SCRA9TVsSAnZWagAATdsQAITiMBzl1rH7Q37nCbjf\nbbcmVq2jnBGGqM/oVepv+gzSunroXQUPuPYd5HCZdBEMGUz08G5ajDgTuxax\njn+Wk+3d4/QbzE6lDh53CaskT7MIALZvbNP+opej1WUJ5lYfUA5w0lJN1mN6\nfApFMYS9cT5kV0h1OEVY5v/p7RlpCY9iTacJCSTTtgkL0UP89kzYp2R+O8n4\n/SOZ4pT2BGgi2ENoLXAvmjXLLqvyMrfEX2MDtGapf3k3IppGyMBwZ6gxyEFv\nEVzBs67+VPqpJMmvApy4zt3GjSMErQUC4oVw65KgIX9+umI+05zGmkTfWkk0\nIsCNwtILd4HPvuZv5ByRF+zMCStXUCR7vTH6m/PgMCwHsQeBfeFz1lciIOxZ\noabhW0fKvEt0788b9949Njsx22j7SVWzlbb3a7cIFSV3l8zh+7iXa3FaHWTc\nYzHgQ9sVikFJ4hc3ycIhYfaEX3bbHpTq8H8hGawa7d2oBa7UFu3FehDb7VOt\n8yivsKsBjvrAxcREajTmzcjfy4FZat0X79U2Uxd6jV9IbxnW4eYnQFFbdKO6\n+SYGWHiO6BtCYgyRVj7tx6eq7RQ9RgXikWIwimwUQHZDZ58ZISepnucniGXD\nP6ckUT7IjmoB8WICCUKQriZCoeXsK3lLNQ7Kzlbsg2T7UhxDGv5ZDjzBsg7z\nCbhN\r\n=T55p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKXq3+xDNpzgtWnrV1Y/9sVgH9RMWrllZmnHpx+Am+5AiB3Q6+bt3U744o4ibFq+iHnFcUqP4jg2L23uUxWxtahew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.73e9f83c.0_1626381586557_0.003641682908042121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-ripple":"0.23.0-canary.cc0aa7a9.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Fg/klMNWuJjBvjwRUGzMRgYJ8IKQ+FOdH7B1x+NJdQHSbO5qCZOUI+zzflgAQWSU3vewgscZfMGOkY2VLRZ7qQ==","shasum":"6abc38f6f197ef49ae5ae4862631ea1198ad240a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":13,"unpackedSize":40723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KK9CRA9TVsSAnZWagAASFgP/RLK+a7ZX5LbJ4CENkDk\nrF/qr14udiNZfTMO2rui8sRDSpitkyZ14R9gn4BwaEIYmN3QPiz3ITkO3Of6\ngSr+Zup3IrDtxr0koykw0PmRPNCBIwgEpsBWoHfogPD7wdr5HiSNNufOMXM0\nLzJ2zs/A32695Hhd0pkxVyRdrRB8Vy344+H4jLmrVVx7X+H0SD+Kxdghq/ZR\nhc9FpNAJ6ACWcUkLxQVFNaOrkUJetyQs5FAgmZaSdOezZMCodYuVmuW90O59\nhl1L4McE/C4A6BrwucjqktxWesezRMXtOZIRqF3rWkKm2YlzcNIym61QcU/Z\nfoEQqPPCZvPD3POXJ3jxbiBBJ9jdk8QNNiv02KtN8rHYWb7Mq6Q86FOzuSBJ\nb3KNxtPFWLTm6LnFFV/PBw/pG6Yy69ARU43R33gh1ThcU8c+60BOjFoCEdqe\n34WnqURhGX+a9dz4wdLWVTbwKVbVkXdzvv5g2+1qOGq9ymUeSAI3K2kCl0lW\nYTHkoVOwMFi4N4zvhoEBPWiInaz/MO6/s9INrPu+Qe6kLO5iqUFCT5HBhLap\nnkwmDMF0Kcg5yHugiCa3z6mok5d7SfFz19uVoa6EIr0+hInsp5Bf0G6WRctL\nc/0bM+whKOG9JTPVh+UzrLm9bjRf15Kj55fojIetujsu62aQQUeGItgWrDPA\nANEY\r\n=LwMj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGR7ec7wr6OIIIZaDJMqTq/RQDvWPwyJC4Vimv9y1VEVAiEAt0Z0CCFX1Fm/hDqAWGPir+hTb2UAA1lLvsWic9udd0c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.cc0aa7a9.0_1626383037002_0.1616318170429618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.a8fcac45.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-ripple":"0.23.0-canary.a8fcac45.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-i+Tx6xi9+QgH7QDTmP2Ow5uHogdM5m2yS6Wmc3LU9BBl8G7ZcHz6qkCIeY8wk4sV35NOKqV6yqGVxsN/W+iW/Q==","shasum":"4a9e82a2d6d1b2a07373609c8f81d7c9d1d0ed40","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.a8fcac45.0.tgz","fileCount":24,"unpackedSize":64648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcsCRA9TVsSAnZWagAA6RYP/3RbTdCeo6dZtyO53GwM\nysHSdK/FSvOOGwdKO1NmuUUryngHfznHtu4jkuVLErgRqvMzsMDhF7WG5uyt\nRz0BGAhheYYx0xrfIfXh9Y/RX6hYN0vqf52Pw8901ZrYFgY9m4kg9YT+o9bt\nW4w1Auuhom0YTiyTP1ZrrMJTJBvXRJ8IYkAK2F+u0F3MN2/MNHvm+K0nbD6I\nOWS38FchEZ79NErJVcBQP7YON9JHsXm/rMvNv7/FUpmG9p97avoYHDzEYqU+\nLLck9XoWpPKT4UgcohEpz2xPy8wVi+ZirbD4O4ULMdGakAwmDTZiFbSzjuUL\nFmO2BXiKEaWedUitrH2qkFCN+2HM80pbrV4v2P+D2ZDV6yDB0WxBRBUBNLlX\nE95QJ3BDbu5qJ9QKXoRZBIhG3QdZEI4go0g6YXpwkXWrFUQfbHdU5pQKh3nk\np5vJNuG3vtJOnonrJZfoY1MbLD3k9ACFX8YEuryb45kn/tMvMLF2ahXR8YmF\n9EpNsyQbrdivVzjvOY8AunXvvCfSsEbucKRTrZgecL3r+3akjTJmOb4MXd41\nAChdD4OG25zAoKTlX02RfyW2NRrFJBUTBOz1C/1fguVGt9A8P0tYK4Hy1nzX\n8EfBbbkZLnsQsQoPznk1kuGjDX6VZfm/xbCnYSdl1J6C+15yuJQlIQZKg4Vq\nFuEU\r\n=oVCD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyIc0ZxwFb8PtOP+/mIDIiPue8X7tIpnh7AfrfyNQvwgIhAIddATxrne5YJDew7ruaig38JpCLnQKPSEwlv/UrJxH9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.a8fcac45.0_1626384171955_0.07391367019174822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.3ca580d1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-ripple":"0.23.0-canary.3ca580d1.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CHPDMwCkuTSBEVqx9oFHbnrSlIOnCMOLuUhNZKEHBCkWNpxh0299wP77kcVwHzVaNUbWbIKqkWAyTaTm5mLAGg==","shasum":"7dc5cd3fb27038cbf1a876d2777649438f6daea7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.3ca580d1.0.tgz","fileCount":24,"unpackedSize":64648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDhCRA9TVsSAnZWagAAV2gP/14Y1192LuU2/gtZnhIz\nGTD+LBHO6L6oIUiLWKEsu2HR5413bxYUNh0r2yWNhGCTMTWmyrP0SZzCuefW\nns2+NHLsv9llmod5F8e5fUrA84ShycHwofDKEMLZEfiC4iwii/Ztpm2Cuzre\ndDAwxjAwdw4wNiD4gn0HNrcR6bjDW3Je0rvz5Up8ZFCESN41okAyk+KfzfkA\nZJVGdH9S8nE+a5/PLXSDfS+CMy5fc+6bHvX4v1IahWlVPcOc1Bx9mFlgZNUm\nN4sLsJ/00IP+mfpx+ZYihx9s+lPGKGTmZpW1VGL1fvhsVw2ioVbqijDV4bnu\nhY4x7VufrjkHsgzAP8ucBIn1RbZFpwCr6B3XtRweG1pnC1Y7/DpAITdFIo3G\nQQ+vGKKoaGz0LMsdkSwAmd8KBsu9pe5f/yAwvEZVdXAmQIMdVs9YWbRZ5eX5\nB7kSO6AhWKba4QJ3Yb+FdxF7kjLDxThGJfjwskSUsTv81QjR8XqcQpN6s+4u\nsIk0XGTboKUeAMyvTcv2phwbanOGIkYmlwGc5vjoLRvsEztciYEq89dpHTxi\nYgQFP4PAxD4yBP0laR1grx/YXQY3D62hdTHsgANimiBUu7D8O6R6t2mzqSmu\nYsNuvnzPm5LHRQFvKOxSJQmHJQt3Z72b5YmLPV1tZdwk9JwsMjzIMnJeP63D\nmV++\r\n=lypc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcK9/07EGPIpORbRMlCrvrLrWXeuM/YPMd0qSCdgk9jAiEApBi8FEIa1LdKok8FRdv9SDYO2oDgZkOYZlhEWScZ28E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.3ca580d1.0_1626386656953_0.740887596681669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-ripple":"0.23.0-canary.9e41cb2e.0","@material/switch":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yPUd6yCPzwWbf/hsFbiLXr/MHuiBYRUvnnLv1UL7IAdQt+CCiWAu/Hu47ak4GNIQ5ZrNwyrtlm432K0katyk3Q==","shasum":"720a93a52b828cb26b64e76401f8c93799e98f51","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.9e41cb2e.0.tgz","fileCount":24,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAPCRA9TVsSAnZWagAAdc4P+QBwzZas/GAZU9EJgODM\nFICRsHRxv+KMciNyjKQSlFF/U8KeomIyP0v/39TgSpvzoCLF1bjFZ48xOvSl\nWDWmchHIU9BYEuq/0t7sxjnolQUJy5S3HndsIf3PLp4BLw+HopQ10fM7m+EO\nfwManx8V3RfuJ+nkoSMMuTVwju6fQgcwALTNPble08ZwRBWJzqyVyfjaLyEE\nrEBSzmEY0Is93aNnXmY4z/ifD189c7++xbrPuc6cx/+3R1+Kf3TIyluYXyh5\ngfoHeC8Gqc5jNhId+xBNqjuv1gKS1uP2jP9xPueiNLs331x9flJRCDKAhxTe\nE/X4TqllhO7+TsG4hwkVPi9vevV10N1qoQRkLuchN5IWX+/tr4MW7fo/DJWe\nAzYDKDk3XCJYK3idVqCKuvF+3Dleb38KcM0hsKfVisOfisWkRqDHS2Mje0cz\nXDyt8KE0hp6Kvf6X/ufumYuurIRXZxz9eMDaRaaRE5ayFV1oxGXUwlpwZC9c\n5o+9Ex1KlYLHT42aGTvRWq+783Fvk9qtI9kTpMff1q8xokPV0Vg/ZP4422gq\n0C+ehn/sTtVw5DxxNMYQZBzSMRmWiLv1QxbqwsTSPM30G3andVP9MXW5TI25\ncMBQQFrIv2XI6mz2wxZ+aRM5y3+p1gn48sl3kSHJiFScl8yYLGLbI/zltIiA\nuF9t\r\n=hkqo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3JvZBnj6sz3b5LZ8Bka/mh2HHG5WCiwPZlabPYG84CgIhAM2hAOxawtbZBg1i6d4sTiai7yoE9L03Gts1w8qJpnJb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.9e41cb2e.0_1626390542959_0.8807341256562815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.c180db74.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-ripple":"0.23.0-canary.c180db74.0","@material/switch":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eUZM1t6/a0GzjhfjHUU9+HwU6s7HBplfBje8bUb3fibGigM/rklndtQSXQCzRCMc0ppKgvK4U7nUdcrlSepRlA==","shasum":"2006da3ed052cbdde9bfdc87ff9cc4f04f35315d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.c180db74.0.tgz","fileCount":24,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cD4CRA9TVsSAnZWagAAXv0P/1qG0b/gaSDZrLQgdfr7\nz9xofoI9RoP36KyuUa2ZzX8+iw+pDNiLgEjzoyhkXKtY/Uk58yWQEuSRMrwl\nl3IlYszXWWPNkdtIT7GL59DJqbBT6v6IxhIp1qErZye8qwc6aLyOa9PXhpj8\n8F0flaIE8Flf1XwZK/zA4fmHyrJGlUrZHKUAMECiHJNqL+BED1E3OWzUwuQ/\nnw5UZni+29mF74DVJ5HsT27D6b3vz4S0Ws9itkXPfi45iusqjuZmeJDMmC/0\nig7QSPcgLdHki6LRGKt+IOqkI0Y/v5MyRe3qQv/vkGRC6z8scCzt69pYx4Qt\nc+GABW5FRu+NSHNsLU9jxEjJAQ91ZOtaPo3HCM6O1XlyS/qhM6qvMv+Bb82Y\nn5w12rcXLaF8nj1EEG8zPm+rpeO1uJwe0BBC8sHsa+3rXNVHrZgS3aWdA/5Y\nzd6Cwn7+E3KddkUkZmZnVIIWpb9dkPWOSXl20Ag0A8C/69KyKXgpiiaceNQ8\nc2STUBSfb+MB7evzl/dfRaHttbwNBugfJOc+VFZm7OGITMqu13pKqSrPjVR4\n+l3KHmSF6UfgB4hg0CS6RFjPb2mhSjYlOYLM/m3XKc35gQ2l0UWP6zL0NYBU\nJeCPj1GG0/zjca5Xq6qGeLjqwOpjjubVYbQiIOhSbrPvbDDK6VFkHtL7kxun\nQ39j\r\n=FJgf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQEPlKHHpTIyk+z75C8S+AYilUyqV/crRsGQSCCHOncAiEAwBNjiDg6+VmxA/Jua20HJG87AfB9DbfBNIlc5Epg+gw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.c180db74.0_1626456311813_0.10335543409574854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.0d0a9267.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-ripple":"0.23.0-canary.0d0a9267.0","@material/switch":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9LMC/0S9Elk78iIhwdT0Jr9UJStS7xytYO7l7i+2v8+ylkwgUJDXgM/0JhNpMaVZdO5IU5z9b9BEd2s+Yvm7Qw==","shasum":"11a779ae95cbd6db48864bddba5f9a9863be8eb8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.0d0a9267.0.tgz","fileCount":24,"unpackedSize":49143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ciICRA9TVsSAnZWagAA/qUP/1GcgdzqhDqMOB15CdIx\ndAR6/NLRv1xiaGvVaNHn4gugzKjFDb6bcuirJpXA+RwSNUAMHV+vwGQn2uGZ\nF56DtUGvTemQkMQY4dVWF0AOtpApCsE3OvD4xMERJTX9FZXPJ2mmcRpbeUHA\nDR+aTMZKwoteb35pV27SvMDTsYv3kl8TkHZmC9NLgVJ5Qa2vz8fFaR8Rk5Bs\nO4L/cULSHxzPvba4Xza5gOZPs/oxdbKUgD+gAzaRFNmB15oBsB13zj9DXyXj\nfW0vzGWw6ieJ6fw1URj9vFK/ocjHV4DOMH2+iETAH2B2K7mjf68I8f1IY2Lh\nK3PsjjuDU0pjtXK/Qk9yALKHctR/ndkZ+CTtfpZKiceePPJWxV94ABVQdDR2\n5E8jf0oACUm//n0L3vB3gf1OXSeV9a6vvC66a3AmFasIY+GGSq4tMy1JCvYc\nINetS0iost/8sLhkoE2TigzTWGQ1TJh1nRplrD5rX/UHC1H+vm0fc8y/e4Sd\n4vR44x5rvgjYVP+45EAyJ6kZSzwVtqyWIh7jWCOkwqXARZGCpkDWtYNyOVEw\n13pz6sZruJ9lQvuJD7sI1+tkwCKlFoOKoB4DdjprXMl5GJeoF0hXbMxuICtU\nm8d4Wb9wr+HGXe6MKleMiD2jP1/mv4Lfi37z8S4XOmCjny3NdWuaH0WhRyEJ\ntz2/\r\n=sMiv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKCLIs0nsQGrvElqdYpqd6H+scn+4poY6mH4FBGcpSjAiEA+fRDPmPHm9bwIqGwfUf6uPIGu/49oYYlu1M0II368kA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.0d0a9267.0_1626458248360_0.5872043746022078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.d234ec3f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-ripple":"0.23.0-canary.d234ec3f.0","@material/switch":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HS+wTCKUBwfhSgiGKB1JhIGqSPETv90rKZcTK8jlDHVAyhYonMYUFvPG29uDXw9+Mw2NVC0Ooto8zXaOcDYeww==","shasum":"e438a79f5d835e6dfe9862d82eeaf2fca04dc8f3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.d234ec3f.0.tgz","fileCount":24,"unpackedSize":49143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8csACRA9TVsSAnZWagAA9bMQAJuYvTQCJAOshfGMjZ3G\nhADwqlOgLWkiWC+fvEoWNbaZH0VqrJ/3Vm0buBFIFrQw4P01YN2smgUJ1I1G\nVnuI/ZOLSsL/uPbHO+ZDPlj4oVwroG9a+CEOf8EC0YsL6sgBu3tIh5tWM+Qz\nqFcS47utw8W3DeRdqKr5DZZ5dBVUmi8qmfSkppH4DPG/JXpLFrh0dDkt6rlg\nTvjhOg6otSwi6Nh5BfaY1nh9eH+okxgV4M2WiMIz10FIJUgf3wPBH0/soIOx\n5TPHeIhqZjRcXE8Y80U9rz0/ijWWQrjV8mtlb+KRDmAyYWRUiQWV0Fybu1d8\nsGq8TuB8j4V2msYuf954ltqkmhK8Wx9C/SRWa4BXiiJ3zsAVM6+e37R8CD0F\nxoBhh4pllKerle4BuIEoqKKkCrUY5zF4oMngf0Pap21Rq20aNTuLkgA0D7z/\ny5nul7iYPoR171WPh9U7y57sbOSf0j8+4sqIRMc4OGPE5lDeAxWNirzbIv1u\nrEt0tdGKwZwbAyWhSdPeXWlH7cKJdK/mXxQxcbuYZ8OYox9dDAx31H1V0Iev\ncbPTpdscCUTg4cZPeluUoQQH+bp+vDoMMsDxrgDjhY/OmidzmMyQRGMnW5n6\n7ASx//fYsEK9/hCv7B4Go8qBt5x4iX2+LRtAxGxkVIoeVCZbbKqXj5vPSzFU\nME5S\r\n=CctL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwYCBiz8gvA0JQBrGqhKnMq71PK+SyZAAS56CA7LAZlAiA9+ceJNWzvcuAJMp2x1vfMTmLx5RFa/8d/uo+h2r3kPA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.d234ec3f.0_1626458880652_0.019440759274125474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-ripple":"0.23.0-canary.5cd4bcdb.0","@material/switch":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0/o3/gGimARhKyA5L9IaAsleqFNVWlxXyZUHDHnmssX8Z++noTKf9mpu9WfYOcZXa0YFBojz0eneU7jLiLlyIw==","shasum":"8b8952ce42dd597d6e08a5e0434240519d0ee2f5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":24,"unpackedSize":49143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fY0CRA9TVsSAnZWagAAYGkP/AhSNOfGx+eoAzK1mLCD\nDqVeMODRiGlYwMcIKwDwlFPw4brZ83YlS3WJw1bZlQvQ4PzoAx1pq/4pfEST\nMU861F3uG13YC8UYD9WbazfogjvqemJ5f7wasUFOUCjLZIX1oe1fL+fesEmV\nLltOlklkjwGSciAqRsLdSn4D9yLOWT9wwB8IPyI3lwFeM1lOj+NcGmzEf1uU\nAkj+2nZYW1oISDVSnoNJlbdwJ0DZ8LMlLB7Hwn6acgE140duoV9s8d2XT3Gc\nDlrBJMljUnbsgDLmLk472c8SOs6Uhsr2TDmI4Vl7d7muZKO32ull2LHw3I1T\n0KXzrEmr2VvrWDDkxqe6tWC/JufO6hFXMr88jv3Dae3HfV0LBuVGax10r2O8\nuBlFrYXLiCPPJY6BfK7pFLP4UPjwZMSEJ6p5L3XUZ4PCNpseXyVFk1l1/yNy\nJyfaFgoexRGTI3LmcrhEuGwsoPu1BJ5DC5W9r3JwrlqMo2l7/yfEgzccKt2t\nhnokSXPDIB8IHxTpjafxfENurTBGGUTj6Qco4oxOLsG42jYHQN0AbIAgGDf6\nPjlXJZxXNR5i6rtOxxLc41k8E4GoKHOPrOAWRkgeApu6pGQ95QZ034R789Jn\n9SKImMQJmgjlCl/IYqpIAu601J/PnzlLgQUT0KnjgOzBiWFrn1AkjOSqDrER\nxYhr\r\n=8JBG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeepjGmQv5HZpupTomW03RghdGAdTSV/n+RMzKqJS3awIhAL/RMeMvKEXI/Ag4jd4jG9RGyvXvx0quyLTVCA4IClt8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.5cd4bcdb.0_1626469940627_0.9331201907279754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.2b133cb2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-ripple":"0.23.0-canary.2b133cb2.0","@material/switch":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F9YLDuXOJz99sTt8H58iBq6UWG6C3U9AjcfF/IUMpeGUf8GFYwy+Ml+H2JltzdzimXiJOvhVwyhO+1vJ7E/J8w==","shasum":"5ed1ea49c1fa30554b7ed83a1fa33c55d6faf50b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.2b133cb2.0.tgz","fileCount":24,"unpackedSize":49143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gL6CRA9TVsSAnZWagAARG8P/07r0DobYm2fZN2BzBGe\nniBXG2IhaM+P1YUZWazzfKI9OMnTRFGkoLrvzAAwZ7GTOuU3PrYsYZStclBa\nDXOWmW665d+VL7xECXODTklokfaRo7DO3KxzwBgHyLZa48U3XiwHz8aW1GYv\nP48foT8CzLWDt1nXZym405lBX3R4IzXJzaJK9GNLOckHJRO4TXO9my40lgZt\nJCu1EXUeaVQNyAvAzru61zA0E0GB/TvcALmMrlPsCU19DdWcSKWLbIs14UhP\n7uyIySESUL19lqMlzKBTEd08jtt0oPZ3GA90JvhMAEcPVRTya7PfRhKlX2sX\nekTZ3cDV5KOMpS/mwkZEAmaPCeFy6L/fSljn77S2eLJ1JTfufIIjwH5pa44R\nR5Io+5kcepzOq4/vQVzU1eI2NJHQxRMkoN/vEBx40eoXswGTThqY0a/p5G0m\newdIaUg0NCuVNl1kzc7b+LEblJDGkmh213MAsby8DcXTQKZRYpL04v3HwRk0\nrwoLtF6XMvGEhHNfpDQWcpU4kP7xSJjPaCPfJhCoeazHBwP4sJ80k8YGKsYA\ns6jVFm5a/LcqNaHMFw8Q6vTSx/IPZR/VLLx7DCfZFZYt70gXro0n2gvE7kL8\nmtLyn46LjRP1tX/X5InSARVJBkSgtB2aYY8M/05MFFCMkLOVMDvR38L94aAE\n2cAc\r\n=2Mev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZlHlqIfvfk+0o9gnB97GcREXP23T8NvNMn31elUCN1QIhAMlQI0i2CFficAVLyUwl08W9MP85840KXsmocanRxOyp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.2b133cb2.0_1626473210418_0.19775771440627699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.ae4f422b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-ripple":"0.23.0-canary.ae4f422b.0","@material/switch":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q39crfC/oaUJRIA5khrFuUFrj3F822cfHbQ17ZQ+2mH8Tq5+BbrEUWnpuSjeRo4qyXrefHoINCrMGt8hP5XgDA==","shasum":"7c720f4190aae323d58938af464a15bff3aabfdf","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.ae4f422b.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwrCRA9TVsSAnZWagAAyB0QAIxA5o8gaSSWEBI6QET0\nXsi+jEz2WaUIFNCZa7TXP7s5M+JeneIa7wVIY29jjCjnx05iE1IxV4VmZE+x\nhnywqwXYfNBz5TCJ/iuvUAd1Xmi8anxhjpRrnSyRZactYPzkQlMFEU0e2FrF\npubXC1j7eKv9nXMD49hWY762gyMM7U8ltcvqrbz73ymWBxhSM4LDLfXp1/Q9\n3irtdUvw48SAHOgmDNEQCfPBhG0Qbhjl+Xz3pHrhhS+dkd8MM2qU2n8NHTpo\nvyfsJwfxsIIeJ0e0x51n+V0oGJ1ZXaNYienS9J1tmUgw6spD8H6F0u2DA93w\n/NgG0PQtaItJWkNbhZgeCtPs0K/Uc/v2ZU4P5KIcUkwPAbE+jQA1Z5N+Kv1E\nZwZ9A68NmJxdt9jLD9LPtn6Zi4PyGcGiirZSRm6v+jOFkgNTWS0BasPc6O4S\nL5G00V/6Iuvhxkn6cvg2pP4sLzuI3FfhDSSdBOAslZMCoaCY3rhnvUZBxUkV\nch1FprtowGPvGfiNYJoxlh3qdADO45J8+zLsV/srAftJmg9mUtRuNXb1ySAZ\neCWTZZp1p90h6EkPD1UdHykgoM48bIjgbwCtWG1TrlpBg4ENH/rWGID/kfNe\n+AC+KM41uZpDUE/wbwTwc3fjpg1ff61lBXspHXUkUI6Ylpo/5r+KTByrnABi\nwyvk\r\n=Smia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+7NFGOGYCbQqGLBp5TLoUgtxlLUza36nB85fw1ie0RwIgPWGgdyc7BmyhFJogctB3m+L1kQ8HTTWmT0kbIZcluJM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.ae4f422b.0_1626479659638_0.8659879288547747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.90ff8057.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-ripple":"0.23.0-canary.90ff8057.0","@material/switch":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fbSyf1d2VyGPtNeTRYb9+A2sq9V+Gi4joc+f+vYR2Bo4dpeefotpEAMifRM9G5x4CuWMg7esW1tzGDeO4XoPoQ==","shasum":"97f82ec931be2483f611f0f34882c686cbaa75c2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.90ff8057.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9Yc8CRA9TVsSAnZWagAAX40QAKAjJRk3MNb9ymBEGXDt\n8rfXQ0vS4EirapLYnQXX0v+bSb8e65snninIJySlvJn9U/skcU0VuRZXxk3F\nRbivmlyLTQw64xZvCn2W3IArJJ12tl9HcsLkLtuLbpcT5wtoOqzthKbzEfw0\n9Fc9zGgJRq7pB1X7+Q58B/XIiU40MfNbp98nc1iAW+GRmXcQuAKg3/Qy7yD5\nkJn0EAmz9mtf96QuLN5+Di5Lw4FSRsYS/umVRCxJ/lCn0f3lKJQVJetMn5S1\nBfSQXCwePJa9tDRsrfUazqNeE5jpFfwnVpvSCGMyPn3mky2CdH3/1HPomtHy\nyCsJ7mJPWj+kjJKUZ9FywAZGHlslEmIwqmB2uYfKKEuDIjTov3luEIoTm4V+\nHW87rfOyw19Cz0EN3fdrUL21UmyUBH48WvsSqvCDP7kY9CtoN+U8edgmB00R\nVoCjoDmDJIQO21pRef7NnoceCj48H04Ki4lZ6SE8IGwyyXwacqu15EAx/s2R\nDh+M0K3xE4//9xa5uEUAhMbDcwb2VQPVhAq+OZiGfHHvq7SoMO5zPqd8let3\nllcU3stIs5lNi1cBeEDySzk8bjwlXNNcHWVKlf0V3XMNzXHhwu4VzmJFdmC8\nThk0l0XuUAdN2EKVtmGOT9UzfIaLnzSTY/rcZxnIoH3zA4Iq4+wvK4YVn692\nk9l3\r\n=mC0X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI4eodAIy33PvCDv53PGsNTNiEwY6lDMlvxkcQswPMcQIgP5FwNuplCEA5LBjQlBbWNg91JO4Z8ym1M5Tvq0EfiDA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.90ff8057.0_1626703676530_0.6705551424900915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-ripple":"0.23.0-canary.dd7b75d1.0","@material/switch":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C8Un8cqLmFXyMKIkL3cizwnfRMBmldSrTTSgzSANxqN0uTzIVWOKVLIKBPhahRVcXuNZc0L5iEd+pwttCiBcow==","shasum":"d5869e4bc0078944a5aad5f8fe171efead1d0fbb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.dd7b75d1.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9buCCRA9TVsSAnZWagAAOcwP/0LKdW5Sy6Zsev/sG/5U\nrvewpfr3tRNs9atYQxV+IIoPhAIsB4mYYS+ukSz7AqL1CaMEY+dH8AliD8XB\ngLEahJYfBD5H3rONO87AW9RK3X7ydAJblQicluYF4CJ44Ttsv2boKMfhgtpy\nXcIQWSCA9Nvj6Qxl1S5nSdkKpCdEslPr2xfuWl76eCRNDJ00MVI1NfDvuSFi\n63z9BfzsY6/OO17Lvlus1LCFz2h/hxhEQeSSVs5mL3xW44P8+NzaO5d/9q1s\nKv3BPv53J0v/fpYifDx28MhWV/SMLUvkLPEvhCLwuioZt4aCbKaDvWNyivLu\ntVadvt42b28SXOSU30YkrXtVKRVHH0w/ocxUFEYuHZP2ipRBDvsZ67ix6CDn\nQUGidwdRSx7OvBBrzknwETojTltSTu5Mn+G6wZHfZ/V3YGvRQvIUS4lxXKg8\n6EqBcAHiurAMtAWkZ/1sTUE891MJZrDyj8bZ0hwXouN8aExqx9e02fzy3r7x\n8u+XgWNtxguI7wr88Sf+rPdJHnIU6LBhhGgd9+cmlgDjG7QGzsyGCSydGq9o\nzbsMcvqSWZE/y6MDHTc5aK0IBDb5n/K7AjLpYKUMAUsJh7TQW5gMarB3KkYr\nUzAAEasszsklI4CoDPPvBds6m6/JCHKpcXmZBOhBJCe1tWzROGhMYHQC/JOh\nyhKN\r\n=837v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxka41jeOKF+4UXcm9rFoCNV4DfXjHTQjbpeDjrUBzVAiBpqRkwi2gyuduEy8ZG6j3S6lPAl0edS12QbRvSHZMZTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.dd7b75d1.0_1626717058611_0.5910881476744745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.104debd5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-ripple":"0.23.0-canary.104debd5.0","@material/switch":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.38d1846cc.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sWD+pgmsdxUPVLBwVwVhDlZ/5JLDB5bYuqZawPa4ZXsbtUmyNTaVnc5Dj6Rzt5mAJfVE26KsRTLAeQ7QvT7rNA==","shasum":"bc830ca2d09766383987061dd5de5552807842eb","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.104debd5.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJ/CRA9TVsSAnZWagAA/2QP/jkKoCa3Wlop0aVzcNFW\n8jxjHqcIQf2N6EN7Rzc7eXfGGocx1p8YHqB7fnwDMrZWxg+YPOpA4M8ICjlg\nkF84NNTV8BZRvRYuqvXoJtqgA3pGfeDfxN6KrO6qrv2zBcYUCERS/uxofecQ\naG+aRug/OD2qXt71c6KauHmSikfX4vEW94MWFialgA9/u/g5pmLOJrZ+0AQE\ne8UnRFWe0xiHeOhZr+TpV66PI56zzCHXbAv4x9boRI0yNfxGp2Ye5Rx2itHL\nSyZqqJY+db8m5B6U8abgQUib1hOwfbAMVQTkskGallduth236XBkKA/1TV8d\nWORXswFzKpqFyJN/1YC6koy3gTzLcKCVt0FDXo5O6y/FOFGEf/WP4kEwfB8w\nND4lPbAaPRSZ54+e51xPLhrjwm0VQY1q4Su4Le4FsMOfhUa3a5ZyHICjhqb6\ndjAXNv2jrEXVNSx34+9zn5lOhlUMtorhHFvMl4IZlNqCfRmDeR2IdWFYX65h\nGAFFeytNfLwYRUaHZAhHPAWzzkXKuqjFIH2PqMWyzYwsV4Wss1rPic4/UKsP\n0ePRUvroxwOywn1HJWeYJBC8lle1CboNeGlzAi7J+JsAW7+e3GI1VehJkrsR\n4TJa6SAl6/nSDL2SSY+gs6g7b5c/t9DmhlS7o1h0hkOcujG+Xz/AsDOSt127\nYr6G\r\n=odd6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXlcdhnPuNIxwO5u12N324anFADpcaMQ+T4E6Obo2B+QIgaCqEJIyif80/vyMe9afXP1yv0/+xj6jKL4qjQvKZ1OE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.104debd5.0_1626735230817_0.8499951564327379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.4612705d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-ripple":"0.23.0-canary.4612705d.0","@material/switch":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.38d1846cc.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+UpFdaBDr1+ohbF5qt2Asciygv3oYUW8CqKSZmw0Tiw4INDn/K5rO9NOhtby/SoFJQ9aIEZ5VVL9MJzxiNefYw==","shasum":"f522f468120580782adc4c3384eb8e0121380eb7","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.4612705d.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQlCRA9TVsSAnZWagAAfB0P/037LA+tmaZMiK2DiUdN\nhLgwa0GzzL0dpYChn1Zw4t5fa+gF2lOBWycwO30HyWXPAb4o8XaczhpneJkE\nFlFjltgcLVk1Dyv3XsBzxrDLQ9aB6Egri00k0hvANvY1qNDk0Xmrdst+MdUJ\nnerEtnxTPAK9oS8EgEJxlTS/txKEKofeuGJumUGOdU404hv2kedcmfFF40Hp\nonBFR0m5w7Z2Uv2KxHnp7JnFzWTD0jIeuED/w/DbOSemRZG1zjKShc8mGqA+\nhIEdada6eGcoCIgGPbw4lhzvzL/K7RX0xxPobXIxGDIfAG6/Qo6aowPnMBx1\nkMuTxwfepDLjhXYhtNj5nCHWm00YTbPRrnLjuoqIc/zZJI9NbUxpqCzqHTrG\n0fHP+v5btpkpcuhSjjozmNGM6/2I+17jkaZRUez7WbXtvZ01HQ0r/HdWB35W\nif4sQDelVWgL7G0D5JZblI3cYa/k9NQAT4QzwfXf6yyaYdJ2o16qRzj+l0h5\nzIcMbRDfVsarKwlHnxznA2mkYjo0sN2VufkiuTig0Z3XdQGAmaDtVTA6o76g\n+9Tmui51o5knOsZ9xip8Uer+QgJp9/6PaMe1l1jd/we3OBCNxqSBWEKBUQ1w\nf2g5exh4uF8A2HQiYDS5SzLfSy/CkhCzXaQvoGfnPjdh3uRKxoHiiCk627fo\nTixE\r\n=ePHV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8tmaGp0ZbsA0sp2AIqXFXJmO1CsIxnjBeO8zQr8RInwIgJ9owv1pNIuj/9tDIrJUb8R9CHhLvaHnVxfOhvnAgbMY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.4612705d.0_1626797093270_0.6980361590428672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.b36502a2.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-ripple":"0.23.0-canary.b36502a2.0","@material/switch":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.6b0442278.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fwYgETleXqp/CsfTnDtRo4Zq9otakhfPunwAJBOwN76mEgDxM5hhUQGfdG++109DRuFGuhl8Kb5ebbdRmaBRKg==","shasum":"0cb78e96e8a7412b7c126a66ef6d22b1af405142","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.b36502a2.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KELCRA9TVsSAnZWagAAN0EQAIbEHhsmJrss650X/sDL\nS6G5wrs6u8H6k7GQ2sEfdx2XMcQhSYlo1XNjbNwjFVmKDjiEcjNMZ1R5X00J\nWaJLmG+l7C3LXy8ZweM5lAjHVifM2/8AyvE5b4D+lpSBuCLn0GNr2NzxDnih\nkwW57phW1uLpVDt5sxvwE+/DoMJWRnhtJb54Zo7p2cZauw8IbsVIJJupeSh8\nwHNa1qS92iw1ketJu9b9+u+1krn3I3zdANf5mPCmmCgla16J3zjssBh078YP\nFowgC4P8ZwzfBV8s3GgIv4osLuV8gcWDTxbdcrVeXbcGWpx5mxQpRlKWwOqQ\nx/ja7alJDWAxaKDXiYDkymWkPy4wXQHfUoZJinwQUVzglDllLNwGxdWcSkMa\nQBxzAY9ZWNG0VbShk+nver2QwGuFYDzUAgpOK1aqtJW1UsiJpvLuG9jNm4Cg\nrBV5xefHDvhhnptisb/x8ZOdaKOMBo2AvpnNY16uvQUq4APeXaWbBwU0DViz\ne3t/51yX0NKz4+dWEuxn0s5BMqALgfy+dkcznJEJ3bdaIr0qHdELifwKNp2T\nlalYYijLfc6SnHfQi6/5ORDqsu2ecFl6HHGuLPnIy4h2uVh2thsTw6ZwhjYr\nJSM0xSmORXF4JVoLZLj8K886+/ZgKb3eeikEG2nbeaASnfrrneMcuCcEuXaz\nHhz8\r\n=zXSD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyHIlWOelWBeO9Dwx6D3617L9P29L8OjTlnYM4W7DdJQIhAJPdlFYMujfcKmZhuq/sOPadSHg5Hx0nsLuD6w4/pI/z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.b36502a2.0_1626906891471_0.2586391148433267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.2c392ab3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-ripple":"0.23.0-canary.2c392ab3.0","@material/switch":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.6b0442278.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yuEpuoLh5uTpIuTBshgUwQHmRkWFGa28MRMBEpqydEWnaqaz47aVOVXhPRBVJvz1UlD1M/fr94tT09dOnhB5EQ==","shasum":"4a6dd974c4958645bddc6b16875292ac82d88e6e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.2c392ab3.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZXCRA9TVsSAnZWagAA9+kP+wQQXXHhxD3P2YS6ooND\nCXJFtNbLZXtHpDjCcKvJceWMNWNUkThiJvdOAFRiAeaawnNSpgQ8uNTmxQ/t\n3bw65rEyHT5nmQvqt9QQrjg0cr18nl+Vg00nZQPlaDvICQLzsh24/xBt+cGC\nmQCSm7tNJLcSchNY15sBAHhiVoMfHtWcuiAaaUNnafQ2/x3KIg1XjN/Ov/4j\no86FQHe0Bptn2Tf7z3zk1w5JDvWJpYOS9bpfaUbl6dygygq6abtFYJ2PPc5D\nX3bo+6Xs/2F3KyWs1hR4gY67IesPeeEYOxz5eCXG3goSrVZFBYWmFkuYHLqf\n/x3Ak21fxGxwfRTmksAsNpDLDscPUgtqlBZb8wYjBe8BQG87gqsxIjTRJ55b\nccPwFPfwT6v/TfVZaVxcWwE9wcmxzXLZZ/dGBXXBkMApreIig1/5kwLKozFA\nIwVnxNv9RrANwKyjQIUVcfkmhJ4TPKbQHOiGWpbXDzhW55mVzpeQ8b2qUC5S\nUvAyuEMvswXrWB0Uk905axtSO4B50qT33YtCVd4kFX4Xh4t4C4GvGmGaEfI6\nHmUqcDwODXoMBCZsfqPI3vTnuw/dqBMmnxPZYzIJKIMkZZeb2nXQjEFq2yhx\nx36QHTPxof4WKXglKwEpMnidrP+QwS22WEDpEt3Zcdp7yQuxFbty+gRti0QX\n27//\r\n=bhtp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH1Ag1czXZqoYewRrYYvrBs4MSz0w1ldbbeSKlyjb2NECIQCmxtRLnEo/7rkydeEgCyz64E1eBBxSE+oamnWjCrPBLg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.2c392ab3.0_1626965591402_0.07419341018398096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.e8bac95a.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-ripple":"0.23.0-canary.e8bac95a.0","@material/switch":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.5f00e454a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9QIsVfnJxzbjWVFzwBEPTTXCH4bnd+QFjZ83ezk3HZvsGUwDZjKgFVHRJ92Te6yfhxL+kr8Sncp7cLJUnlRKBA==","shasum":"18e38dc3b74b1eaec0224b7b066dfac70da0ba50","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.e8bac95a.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6TCRA9TVsSAnZWagAAUgsQAIdIvhhnrEy+NWkCLS9N\nowu60/nf5XRwAlDAnUjygo0f6gEKLAMRVcZrxUTHVd4LlQ2V4tzzCJqZGAyN\nvADme44l71xuMv8sx3/+stX/Mhh4MM3tjzOjtFmUqagN72Jtp5q8+NFPxYxG\nQU3q7BEWQTE08AEqorf10pdJw4K2Qq1v2G3LmJsVnv0DkSk4u/AjBCnSoJlt\nVs5zq6p8wWttK5tNt5Kryy9ty3IOcjF2VQttOOpzYs/pNvZ+KCxQbWmaFIWs\nXI0T3DOKteF0jWRqkHl/4bYuSXE1DbyJ0XcskjDWRJVRopF6/NJS1NTYxQZN\nLTmjmqeXYcRE/0HUN/Z+po5T1cLmVFDG+tkHCPsJ5/IdXP2ifcsnP6Geq9po\ntduurIMsiVgBeDA8PeqsNY0x+esHLbyseMOYDcJ5Bz9uDFDhJhNa2CF8gtM1\nxdjwCGXPutp036Gv4UNsoumh8xDjLX4QU54haYb5N1+t9zfuSCVaOLYq87de\nJcCjxHZap+djURrZF2xzH6WpPPdE7Zve0DH+0E7hIWqmEEzGRXlV5a5/WxXQ\nNngG0FLOeH5ctt4ZqfMpSHdqyzxD4z8oTpwUHt8ZEN7YJMFe5swEP0JmBwPA\nQCZpbj4umV33oHPD826LksLnPWh6inNKm1dXKWfZXhznlKkKr36yyfqkKhzv\npd4/\r\n=bs8f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3Jh/q6w7ZMjLfZBmLBaDYYgz0nxZp5uaeoOGQ5ozjWAiAhOhdGk9UugtjOntGWz7Ej9zO73GSEwdn0FXX/UEop8A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.e8bac95a.0_1626979987217_0.8241221868500777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.38f29f8f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-ripple":"0.23.0-canary.38f29f8f.0","@material/switch":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5GUU8x4fVu/6VCSW8bh38jwrxaixvJqQBbYzrN3KpQjr/wZxvD9jaI7JoFCUoyXpXIX8KRT/WSVjX/g1iUlYWQ==","shasum":"a395b6e5feadaa9b6f88887a41f27406bf268e5e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.38f29f8f.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdzCRA9TVsSAnZWagAAJJYQAJ9AEjxMrKbqxUFBqlKl\nERePGQn9Lfosew4iUO70V/cbXpUAeH8HN5QXdxa4/SkjrEVxvdUIGj0zgqjA\nexpEjpRVcN+/sfLLrsaBuFViZNTDRLX+IJ7MNVJTK45BmABBP0fYvYBMFpJo\nCAiPLtlYK8QVZtS+CTLS/4yfyM5SbTehTZBmyuWRQZt1DmhDrrWHwfLnP7zu\nuokZirIDPFksTlBBLuno0YUgSFLN7YMawX594IiEhk2sXvFtgpgvRMyjiYOH\nket229MPnKYQYAVQdFM/+GYUTaxw5Y7vtdWPmCouhY5T9zMZf6y6lNBQAOLx\nzJCN6ac5Dq4V4KSEyPoWQq46ECgTHC+sQtiXnCPo1TmGTFA1NmR85vzg/PZ8\n7OkM3IAOQArcuJ9Tt6s/uwGA2yMdR8L64JjWyQFGM3/KyPInSuk7HfPu3Ety\nHLzfBCAgugwP4BgodDifM/gbfbLgjs1r5Ohocv4uyJwq3Aimw5AWYLcdFDw7\nCeuwMvrhm+/7xXYxXinoCK2QmfodDLJhn3ADvs3FHJCogGGKDI/A2jOK7v78\nFp+zZv9nGwHcuocDBJsLE5ljLEWOlfImwccg+F3h2s6+yhhXekQPaY7PUqX1\nmxhOy7kyKBc/EtqYBScItQXXpGuS8Idwr6Tko0hKJZu78pAgs3fPqnK7CaHb\nr44A\r\n=Vg3i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmWvGBmL7YnYSuIaK/I96iAgJ0Dswjqyij9SSj2BRTBgIhAMXetls3UmfuKcRq6xpeBUIyrUP68KneeJOZOU0fiuxD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.38f29f8f.0_1627064179197_0.23212783448256769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.e0693475.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-ripple":"0.23.0-canary.e0693475.0","@material/switch":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-switch.scss && npm run build:style-deprecated","build:style-deprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JAJGGLvm1MF1sv97lr2oGDCaivDf6Qx10fWKek067Ex8wcJfYCS9QW7+l8RBPxI1kOc4GamlnIpT9NntdGACMA==","shasum":"fa4883dbe8aafae068f90ffb42d77e037caeda0c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.e0693475.0.tgz","fileCount":24,"unpackedSize":50359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDcCRA9TVsSAnZWagAADR0P/i1dNiS5VDc8gn9chiKg\npBH9WJvFfTLL+QpNWdXYsg+3Xzmf5KhcPpMdBlcJKZ83T6+qnwJ845s2B4I7\nT03TLYvAtnrpZXuISz3iNtsQs9arh4BTI7utZ5tSdWAI6+CJJV/iInGeTYWf\nWbUGxSRWlFuL0faHB7eIICEOj/u6pEPV4IuuNPhbe28gmUJBlKh2Olx5sPt5\noOIOx61//y77h5SUtv4Fu/H+Cp1hcynV3R78op+AxBdDAiiUvqCKNCMUDMmg\ndxNCEsOl3Dy/lTEIwOh6NXFUROXWwlX+MVcMOw380epuu5824wx4kfHWfR67\nKOHFC1sCmcsHtN8IbV1aHmj+2R64qqcI5kbv2dzVu4KMVCB70kJ6Rg1ZIucV\nTRvTkHM6B7fI89tqqMo91Id8YrXXK8we0leSakMlYKoJlLpXhLl3zt/BqHu1\nv5+N7dsCN8xQkkUwBgaUh7H2dnnnEvEjX9ciI/BQTUZurFaguEWjSysLMRHU\nxMMJT41Qs/MO5zIBLpaavAlcpYy85aJnXKVqedYFIpuMIYJzHtkKzVevA+DC\nfnbB5ur2CnJkMPL771v0ndkXYX5Sa+0q/zdkbr7kNQQ5grabEMlWrpDxNPrG\nV2z5SK82SBPMF4V66cQnChiqdXzdId9IGU3NA9AdUJ2wh7kbpEkUOBt6RGmc\nu6ot\r\n=6XCu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBXpEk66ZjUlvE6jH9Aby2r7GpmGR7mNhVuPINBeP3vAiAYts19Pj5bfWUAPFDE0fBY3MC/VOQ+YEJI8UKQJj1anQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.e0693475.0_1627066588604_0.326896886722009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.d595e030.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-ripple":"0.23.0-canary.d595e030.0","@material/switch":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+hb4f2IYYQKsdubCp6lg/+vQbhcE4BGyzSdVxc/n50tV2hdAt2jeMdW9j1atLvyVcnuOs3THJYR15BMxI8e6cg==","shasum":"a809e283a9d0e5fd576b8264406d1fac5381c849","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.d595e030.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxICRA9TVsSAnZWagAA9agQAJf/9aJLi9hc6Rvic7Ax\nn0MkmLFQ0DyqgC7zlb5CA2hc6qyQHNSomB+N4aWO+O/MBdT9B5oFVE2DDKe1\nl9Hmdq3DQUoqGy4xHVa0+pUHWmTe2g6X+5FFa1TZ8YLXQbfirxZla0bumMIp\ng5UrcOOI5vUlJk7tGEL/VVWJeL0gb+ONUTLfPkRzNlk4tD2xzYW7CsAZUaPQ\nbw6AAqAyffMofxi91MTMHErsAhtWUQKlfzFdprIQfi32RRRu/U3NAX8l0Jat\ngneCEuAPlP3cXiKMsPSjArwG1c9CmEMFiBZWHHQ5LE4jkivBX1ZWLiokxaHO\nSATE0QUmQBHPu78HzCllVVuko3+iuBqgf5d2ClvUgpelEiW/eERz5dO6r5iU\nem72PMetbnaKfRIqTk87gZXPR0oYd37b9Y9lSk+hOrJA5/BcS/qGwsBemTVu\n1bNZhIx+nnj0HQYfcX7XcB3S75K6hn1Av3lFdMqtUTkqFgcrYYPAe+HMBRj9\nbWlhFWEJc8ZkSVkxw3ZF+cXloO+ufZje15WfAwWrH3CynnpvTsKLnJ16/rdF\nCME8/kEL1+4X6oBNmKsiNeTbDpT6olWJIJQ6B1BcVplhewHHIFVMThnkcHr7\nTeOX4lgvWiVXOAjKnvSwj27N6mNnm+UEq5TgNy2NM+ZUR4lYXJbTryvc7CjA\n+ANS\r\n=qjml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc/d0un+BYPm7+8TtqZ9fLeCA69T1FtS/iBSUg5tnRzgIhAJR2FL+SOM76hp4RmF35HNWoz04giWcqh+BstOPtPlbZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.d595e030.0_1627073608792_0.9728832653250454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.fe7cca31.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-ripple":"0.23.0-canary.fe7cca31.0","@material/switch":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EpSq/DDaWN8TmVkbXCP6BwoMWf0Dw2VzrsXuG741s+1//BxdzrekTlB7ZEdq8XDRbtA/QtdhTbjJsRjoj0Ap4w==","shasum":"97515d68a018a212be02938f75b1a7c9d1da6b74","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.fe7cca31.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsuCRA9TVsSAnZWagAA2kMQAIT6GzsxW2eiFGcMuPKe\nGjxTDj0P5z0oTpgsmvIeotatILH5Lor90+mjX0n8UhWnDDVD7vDgrw9v1HHk\nV9lIw5+PNy6ZWJplO4V8dmXKR8/YqyXl5Prc5FENO4/eWaU54ELlZyb8L7hQ\nAHrYQbm24Xlb8Gih2iN4PuDGeqzucg5pG/pbLgu4Y8y9igIs5CxEhMhT2MJ8\n4dkVEyfeNXb0LWQW50dVYtzDK0XYti7VTEHpII+xw3WCK8NM2gyiN47eGzNt\n2Blf1tNDmSZ66UBcObrzC31HkpKFl+MZzqIZCKR0x9Wz4SGP+gb4iUAg6hWt\nSYPIUGy2apSzA5W2Yh7g0Vf2aoD4uqeTlBUiXWU3ZeXM47v2L7YuJZ0uSsj/\noOyUod7c6G5ASnn17j18TwiauKUgLE8cKTYnmsG1D99M6IMsJGZ2oigwf5wG\na90GMFvigguphLjun5vmzv2JZBS/tzKgpxDpYlN8CEdOnMnvLeEbc/mmnaH3\nlQtxSOW6RBrXFDYSMBmBaw0EiHp3suW5Fc5kEVLqIOeE3HIxf/2+MUeLfxQL\nK+VNM1Y7R9/CVkfqSjxDjMkVXsTajNK8aX7k9rUYtzpl34nqGkbIEi5eZ3W1\nHH1tbxDHJYqN/KvIjRzbEtS1doin8fJIc0YlxorRjaUw55m1t5pjY9wKhFxo\npjjR\r\n=i1Tx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBT6VBbbgO4sRAveP0r3uVoAPI+24V3McZ5ninvdk17AIgWcdwlnRIk70l+GNI5TOFOy8WFhGqFJbvbQ/WDq3W+U4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.fe7cca31.0_1627077422412_0.6524023751501027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.fd9da483.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-ripple":"0.23.0-canary.fd9da483.0","@material/switch":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C2aD0ksGFGj2kbeenxwpRdTRSTQZqZOK0HLdF1vfBGtF8U02EZVER/RRAm64LjYhsq193NCYvY0K5FWNijmfWg==","shasum":"27ce1e2f6b46d0b8210124b5164d95fc38945f70","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.fd9da483.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yg4CRA9TVsSAnZWagAAzCUP/3+NgLzp7VMsZIw/nxOS\nzzuPwzA81a9UD7tVk8DEEQ8zZG4wTGkz6LVgDhlKSjbgNras20ChflnbTE2X\nf+I+DqK0MKP8akWzB7DrTbLBlNlyc/ok/ggKnF5SAyI5mQ9mIC2W1+wC81yV\nMx9D8jycgL3qFLjoYrJeeRW72lCtnopTrH+/YgFF0m1+qPkZRDabmoWzQTo9\n8DbbgwwBSNh3lmU/IyjOnYGvV1uFvXeDjhfadgXv/x8aHoGBtD/KET+sBF0Z\nPQ0Pv+DUf5aENd1kvqpQQBTVZmhud+xvVOz8UhClu4TwasBsReESwMFusszq\n9nVglgQgF3x+MV3Wt2ra66FOgaqg7cBTvwlkCvppcX2k8vPpfCYTGexm2PM2\nu03qQArdz2XJA2KLY6P3nXzGwquxlMKjb7xXOlazFa8bCXoBtM0ZeOX5UtWz\nD5r7mq66coPKVVhU/CXErs6QgagIkNt6sEmNFAc0seXAop88tjIS5zBgQvM0\nfJvP8hqXVR6j8rxJhO75B9vmG0dUysKaJioSF7XTF7e18fKQb544k0V1A+Az\nI1p/wFfeLmx1E2O/nlXPquV0XVAUcGpYGiGCzjiTQPgknkZEnWE19U+AnQxp\n+UUWhXB9zzasaJml7e0AjeieWrOu04BiPiYLms6ig3xIsfCHm/ezm2Glznwk\nPlxP\r\n=Krob\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGewmHe4zaQ6bCyOd0nBo2+X1zeG2DDYLUTslHcUcAuSAiAD6Bt9H542bWT3uoO3/b8lRBnaoagM49eECbNNcdT9OA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.fd9da483.0_1627334712069_0.8317335006826216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","@material/switch":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-72rQtBUKj55HA7YnVgQAjiXleB/IRXIOPgfkZf8kJeIFfo+h8XVNUikhKDFhox1Imh5+SUNhHjWpG6sHZPdAVg==","shasum":"23acecb4cf8ccd47c847ebd32995fe456398e757","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.8a4c7e06.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrFCRA9TVsSAnZWagAA1IoP/3AoynNnvGEWs15l6BMe\nTiuaV3liEoYAFfUaAmrM+MYviPuahRu+Og1Akt9Z7s1e9zgNcKJuZ6WgM5Hv\nbgo7Yiets593IX6qKrP+3ot+cvnn3LepW8aweKYSDmIj2hSov1FUGEjOKBu7\nmCXazAlRMzpdIkh3aVyHtwgy1BoUCwIGkz+sDPrhsfg2u5TWu+xixcbyU8c8\nSOyn2//udALbnabVJ7htvrtRrbRtCHbgREeryVFov5cubivhVmnBPTq/8E9T\nYDvR1NnN8A7rnqqiaDJC+XgdJtRHi0oSxsJibdHY1OFLEVMVVXqDH3jHt1GQ\n03CtmqOSkNaz7ZaDFfSVUqR06N/9Qdlt0V6C+IvZMcIAdM9YAtQEvISON9jw\ngzEzR/J2BN1Ac8cmYhIv7AgXx7iLtn3F0mN1F9Drujep9ArrSsI3lfYIaY88\nrtkGo/xYjEDFWmIypfFhbo2k0KoZOeN2kRDKwYRc3IZcKdEFf70zGuueVpP/\nIqC4YkIcyg0gIyBBsesFEPtkFouT9Uo5gXJxM7sIt3/k4lZ2cGj6j/OIvwZt\nRKZKHeVQfEqI8UWrqO5BCiO9KColyliuAAbtGvIMO+GZqJWoCisdoZm5Jwdc\nAH4qbAhcUVBRj+1vSlw0G778TOjZGDv0jYSGTip6yJ57b7eQEMild9nI2/xi\nWB6F\r\n=aQHO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5soSEluQ2Ze9gqz5COapcW84zfKKRpz+V1hfzusoxRAiBeP0mQokAxFOY2C6dFF8BMX1GaI7UvOUiAaal/UnC7oQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.8a4c7e06.0_1627339461389_0.25983717099119885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.5b395fd1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","@material/switch":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fcKGkLJy1cpzM2/Bc8TutimYuuaTdPHkldhTJak1xMNHpXyDDdhUSVvImYfua5L7l3Ai4LHWhkK3StiMVDph1A==","shasum":"df999d3cc06b699c4ffa212690db35610d3b33d4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.5b395fd1.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5jCRA9TVsSAnZWagAACtUP/AwV0CI+tGC3Zy3+va2t\nXh2jrnRZnfZEX38hbojedSmivgotmRRZ70xfjNUav/hrbNy+PDafPr0S36qK\nj0v/N2HyEeVg2vmiltH+ZHV9YZNffkZwT0SpU4kIyxTQoDaR9YkRJ7Q0NSqq\nlDYQ42sHVagt2q2C2TWC0DN3Fevf7gsMSWMQJqJESnlrQv/tilKW4q7bujBf\nMu3E57U2x5ZJ58cwoHlOVQd1tKscWWlEW6Sq2gA4g4X19xTmYO/Z93hjfA7e\nNdRQNKMF19/d0EpwWUrXfVzgcKLPsV4Pjqx/jwxzEJeJrmOnpcRQrkpC4qru\nvr9FtuaEaTbYsTQFKhD107EWaudLbJrePeLhQAmxl3W2rfzSiTZhOhL/R2VV\nzQjfasROyj4qKDp6VobhsKMgOe6rREcGuZED11uprz00mg8zOZLWvjlKPZdL\nYM06L0Ic3V5EOkviqLZT3D1EATiieWOwWnB+6BRGvckrTp2h9hSh9l9CGExw\nmrSkXT2gxR4hcCSK/IK9QfkQbuoytPUhmo6UGzrhMyrCqoa0L6qyw8o/8PnL\nne+x2ygPr6zLvC6ZE4Rws4pVkCO/rbBHu/wwMVx7E5mDEC+P5U+lIMFyrbYD\n3VkGhxAS1fqU65PYwSNHrTDyFPDH5NkB6zeaAnp47M2cACS6UcNLCbB+6ikM\nAeUX\r\n=iIxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfYdgCSlg2/UtTLPuNewC1JDIF6Dz3tacYmKiS0mLjrgIgPZm3kbgUwYmJRXnieK/n33b76fkKrgHxWP4M3XLKPtE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.5b395fd1.0_1627426403493_0.9260817639786503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","@material/switch":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s6a9pBgr+U3/vs4nM06YSMXsVhvT5uxGQh0VaFy6aOF3JhXlQVplrUrtOTBCTjwQTnJlwcKqNvhfEPjKkMH0TA==","shasum":"baae74c86617c727b091e28a4a5c91543593438e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.e5efdcc0.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJqCRA9TVsSAnZWagAAk4kP/Ai+BKviq3EH5jL50MHe\nL2JCac8NukG7L5DxdS8+SpdGKb4G+sZjjZxR5AX2Oo/GHfj9rf531dGBWp3J\n+zjLKM6yf5Jjy3XtME6O9UPxZ1P4tNc+acKv6pUWPbNcBgWkwlvT5Tc0zaqn\nhcYJAirC+PC6Gn794fi8mmDzpEctQwW0IyHERF1dY0p3Rk/ENH9xYGZF15OR\nRr/AbnLyGINLuYW1dLBx/qudQQb8/GTx3UeKKHrtIU0aqN2Ns2XIrrM0iYm6\n1LpJzBZmxfd/E1RopbalIp/V9BmLdZDooXEGEWdHI2DpojxMiCq+dnICaTBz\ngPvYyactHxcMSXXU8nn7BnhJeIHmoHQ4Ck2PS0/7pH/0ZxZ2yw7ZHIzlBGf6\nxb7OqRzxWESmy1Jl4ywQnHML4o7D9e55qGATzSFvhYaQ4H7a4Wpv/2M2RYDL\ng5kvap4HUfcXvUfUcl8jMkSWO+yS/00v3HZPNANWAnBMC+nU64SIqEFJ9T/k\nHvKDr0p06cAnUBEPsen6AF0w+OcFC1TthOQioUdVHj6kjai9J37yHSS5QlfY\nc2CpOSUyycX5S7602QJirCzvr0EzeYfPwWWsRg51vE6aNEH3zutTnNuCArl/\ndsH1L0vSyRBoI0laEG6NspdmziYR8TDZwzEfHhDYtgLTYIJcvJfXmU1NaSlC\nNNc0\r\n=3uFc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC/tovoeBq9mr0Hwp+D34DyImvuMZvBx5yuHHnpw9+kbAiEAlTAyy8Dt+PatLVk/ZmFCRattmSNMoebLt2ijoqAif5I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.e5efdcc0.0_1627492970232_0.573343648408237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.ab310900.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-ripple":"0.23.0-canary.ab310900.0","@material/switch":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dpnPIm5JMobddyENI05FSDkvGkc7+THZiWJFVWRJ+Ah20XPi1CtKTcPa+NtRQc9ONRLodQCpnODWC47/6mmkDg==","shasum":"d96b5c70a41a77c002f6403f82c506e54507ab59","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.ab310900.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxTCRA9TVsSAnZWagAA+wkP/2pv2mElMHElllf4X/q6\nbX0U/H2bL4a4+oHitsU5C0PF4+y4gKZQxZ0ex4YSnH5Na6w9rrjQB2BUaNCL\n60JfUyqVc9j0fJivjyr1UY1vF6H5LNo1r3+XWqbRp/aqnz2dVFDDwfklOpAY\ni9NxTnFDkPIlFgMnhRR5gOjZHcHWknyat5cLot4xiIa0HLBm7pONeIsvT3FJ\ndoxSLFnWPLyOwQPajVjq/vaXaQz864DG/1cGkUzQlDxZ2eR1gapW3MCK6TRE\n6lbVup4XyWFrMAuIOprUDT7VKHkUGSS3nipgDorV/QK1H4w/ow2SrI7Dqi1E\n35eDa3Yvj0HOK6MJOimt6V1ThEtnflbG5+a2mY0K1o9S5vCmpg/VpCa0Wwyl\nWfKHNNhm/xu8C/QZxu7q65kVztXCEChENGAw3YCGG5GNggeaPh8XxiNKP+Te\nJN2Ji8Zkl/P4y+lFS6j+MszEPBlpOD4MOuIODAkNsQuHFQDya7e9b84sXMMW\nKEUFDdbSs2TGo9VCz9vuLVpSCiOi6OMVG0h0aTjCSDghdM29NS1NP4P7ard6\nqpM1tn/aLDdCI2YU2g4a6dFp61wEsAhbFjT0/Dr6fes1YEBAF30esFwXoak5\n8Ikk7MFKa7eqO28Wk85qkTpkO3qUBupTQB8YW5p4Iq96mYlVrxU53WuI8cXK\n2u4p\r\n=47Ib\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ7+hj4EY7gSD5eiWzqeqQyTVer6tMqpgaOGqm+pFCtQIhALykc3i/hgwFiPa6layPD5EiUukgJWCReLUjT+gSFWXu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.ab310900.0_1627503699148_0.9647969019041709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","@material/switch":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bDMhK++NANwKaDUy6grOs3KkK5GrlY28t9IMf/Hk1rjIopPZed4FKokrNM5X0xJJYlENfGfBtRo/U2r1eief/Q==","shasum":"baa0f23e22edf8ac558eb41df27d843b80ba577a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.21dc9bc5.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1yCRA9TVsSAnZWagAA+RkP/j2+5zW++p1tB1ZxVyUA\n4R2eBWG7KJytuOHMkHvjdXa4jjVoDxs7kQoqie5S/HkQa2bBtLoeTk3FuAtw\nHCLzp21qdmmR/9G9FDMNZJlVnR6JwcgY4ae6T4k49YBklCWUhzo+KZipvh20\noXRXm6KvTdyjgs7wowAl/Ll1VYJVZpvkX3G1N5XqklQWZyEr88EP87/FWvZA\neEn81qi9shM97mgPFfuTyr5mZ6xJWjeb42IMMxke3z5AawzN876KuB9fvbGo\nhe/r7Q5H5g/ixBX/AMs3a/5DC3m9f5fLQi6rvG7UgbvW5y16ai5qeKBnYWkI\n7+5ulYDXpbfDpICfMr/qfp9udF6E/9tBIVghkSLUfITs43tiTd2q7ukeq2D6\nK8S6c63+rK5LMu+UmAHKtYHrYIWtacZsxI2vHGimYIDSCiYAbpiI9pyiiq0u\nVO0/zAUsAfEzIQw6NaXSzbqv1BsT2GLgK9t/0djXpzAns/lvvNUvXheV+0+u\nnHkYnyurVOEob8doEj9gASbNkupAhv+8HIb5Fb5HIWUGH5AnSlXaYBkH3JQS\nEynaJkG1XPVoGF1CcE8qLGfIV75Hiizi7Tj0N1n4zvN66J6clbxxu9dpLpge\nZjn4UWDnv8WtFhelpvLPxnI7Tb8k7JKswhx/1p+gOx7+t8Fnbx4nib0jcRrp\nmEkJ\r\n=FaIr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWN86m3w8pqoUVFisgM6Hywi54sniDsBitEgBCj3f/9AiEAttv7KF2mYKo5iXw/HRwizDB1AMJN9t7Yu0b7Y2GVM4A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.21dc9bc5.0_1627503986529_0.195599210418532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","@material/switch":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sP5uNOS86Fpf2UNxmVfb0/tfo68izf5gpLeMpxOrwwiTW+1TiM4Zh8k3GK1V/kH19Qc1IslfgH7c2pcli5I95g==","shasum":"cb7d779dbb19157d73fe4aee734e4e3ff304c34b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.68c7fe5c.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQpCRA9TVsSAnZWagAAMNAP/Rl7514v1KkL7lT1NLkz\ncIfV13B/2gshH+oLWq3ny07L8KuSO02Rsx2l0gt2NAhveVTanqCrFm69cOcG\nS5R7iKsZ8Q/LwYvo6aYerk83DKMkLs2+1CETGAroKvqZ2x1ysEzh+AkxHoE4\nhTlzoCcYO1vo+Hbfh5GZxzuZE1It9+hgEIHTGQelRJnErkWaMxFV5gnkyXN0\n+bB+u9NWV7Xk4gQRGNyi0AlpnB0JmrBJHghPiIGg/PnEufOiLpuXdmjpuruv\n3pyShCFE23gabZx6yLLNhKdQbUSBHPj57HQbwLF0o8Juf7hnsnvbUwnxOUHQ\nm0z2Vqpd9YyAFEbhisxrQWfclTmvcYMjZSDr1zXoQtN4ptfIeLlbps0UTMFA\ncPlLCmBCrmvQJ2a2BQCxqIZ6WEnflv7qJlUn80+sjS0X0MaS7aD8iRaNnJIh\nM1qmyWwlMFhLzjFffF6dBMonMD2+21pYPWRMDMmCCJIyhNCmggdL3Q4jUu0G\nWWjy/QHatlkAgHcBWU/3tFQJR6frmofXlcpDE61Lvmrgsp0Vea71+gIcqHC7\nujFw9/1z/mq5vnxX3LccIW2YW1IOMvBkWfciZ4pO7037EO2t7g+NvxvBtM3d\nhyEm0VhP75upTPMpOeNSfRpjt0mJwSmZSRsNjIqtDQt+mA6vXGOzzzh++mZG\nfNVh\r\n=UML6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzjsCDK1kxlZZwuye7suSlv4H0vn+NMYItOynHakmWaQIgML1Ic+ibDODbIQRoogF9Qz3OtR62tmPe0dRddE6bg08="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.68c7fe5c.0_1627583529700_0.8574270288057975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.aebe39e8.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","@material/switch":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1pq8X6XjFBpGwUdoaAnMlYNcFEJ0XXt8l3MDKoSq9iL1jjYFDOzoYw7+MfmgVJtp6PaWQvKZ/TfpENBTI1eiyg==","shasum":"bc16965b2c831aca8afee4b8a62fde6d5d0a8342","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.aebe39e8.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE96CRA9TVsSAnZWagAAFm4P/1w+ANUS0tHbOyfzwAFX\nPqb5etc5Sj4sLX/BQByStobULv8VN/gGhaVE88ei7qVvQ+wtGZMIIoa0zQd6\noXNAp0l0+B/px7PemMwe3BUmz7M+1sxEFpIU8HBcJkwviJGtzK2N8u2q/26d\naMsXE/YTOdYDQVe/10pfy080HsXPPzwcBOTD1AWy++g+e6b1XZoaDC0cPlX0\n1GSoZpKnHyxbQpveSpbj1adeidDnBoF6PWyaVZccJc953YFeWE4OGr9bCLvG\n0PvU0I3NP8MDnLiy9ADFLdFkFEA5sDdBpoIeCdnQB/CgxRkRvXbpyZJNKQnF\nTfrSIW3gz/pVHNDnpIVV7DBPgQpEUMLMEBXK+WTsm7+ABDQaTmxyLaJQSz4R\nT7kmpQKDa9kaEwmZjqd3d+rEV6VMvVVpT4+2XhxlCTK6FyRrMHoL5h34Lm4l\nG9Y5GDi5C61m7tso4CPk8tpQaGDsOEWzo9mqaRNFRr0hEygvLeqQn8ovxI1d\nM9QmmEOQIMr2Kp2AQUFWZWCiLC46xQNFiJpc6JFXbKr1DWMYS1UtGDAyP2on\nFy3bLKloZNhZvylvl2F8eRNRkkLymSVgvLWJn+cdB5WiOw3deelnT2aJ6fQD\nKtW8yt+7p3QBTg8myn7Kk5Uhrm8v6qm2MNHAw0NwafDQDKaLFVzEWqyiKIsn\nmzLL\r\n=v40k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQAYola33LVaYdH4L4qE5dtsK3nUHdVoTtPYEmExlidAiEA2fkh0EKsxoT6uQsFG8qHtg2H+v/YRzbRI62esWVL7to="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.aebe39e8.0_1627672442649_0.04886177561937921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.ea889c69.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-ripple":"0.23.0-canary.ea889c69.0","@material/switch":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.cc5377458.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AhpyorGt7+xgqTXD7XdBqUmaBMPdZO/nudpfUp5LhNAnVKvX9MdR766H+qzO3ygNB+UFMbSRhhjB8pfFyFZFeA==","shasum":"1a0002b91437d0f68968409e7a4342fde0a30834","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.ea889c69.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9jCRA9TVsSAnZWagAAJl0P/1Ph3SaJkDeJVmmw6WzC\nZhQsjnS/9U54sgOCIFje6WzxywFWwqClV5o/6wRS68Ct7MXMYk4Xpju4quyk\nLGkJ1F1+QFhbF1C8HcujTPtq7mUGqUrT87jOIU9oVBeYPbwA+BzI5RAdy8uF\n1URATLqPiE1cHc8o+ElfP62V27c3eiNW6a6475CHgBoA80OiPrewcJTM12Kr\nkF56tRF9ArgIay2s5dCGd5WN+LqUl/sqrebGHD//Is7BryUIpTAZWklHMuzB\nqlew6VJN1Bx2WgA/Q6Ems6auNG3VQjLhHCedPBaVlYbaTosbUE7Zz/rUCHav\n+fGjrEU61P8qmmYhIDYy/ZaO8vHOXw7ttBCaNoB5n0SzUcGvskMTcXmKe7PC\n2K/aEP89yRQD+fBExJ5SjtliRSL0cvlzw1w3gBgVqJdHbwIPzg0LmoD5P9s8\n6k7A+uBJ2x9a6/4v3EfcLXRindpcW8WqguvZMeGbU6P2PiCyCQOR5WDZHTQH\nrWGYW2Fc9wp6PnWwHWyxeM8qzqcbZVJ7DiZU3yVqlWFoRgvAnWiTdsRWbc5s\n4L4Ecjb5hWbXsGo+FeWoKTMzL23Wo9BhpZac9u7dfmjbkwJH+2C3Tgo0M6Tc\n3qfdh5OWUWALpwHU0LieTUBE6lq72Aw6UxT0udeh3dDqIFNEEo0OpSfMb069\ns9VI\r\n=XzNN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqVvJkzCMEvNhQp2SG5b5vc8YeHioVcfbsfrycYhZK7wIgQG99VWFntJ1AVcQiZB1gUFMlXMLvTjXTF4GaGTFUXn8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.ea889c69.0_1628016482905_0.7607510561994173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.21918905.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-ripple":"0.23.0-canary.21918905.0","@material/switch":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.cc5377458.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J/D+8Wqow4RuvWJMJU+KVrpiMHxMAxdFkmlZCUrF7JKxdsWRSufAA1CcdAahIOef0mF2mU4hvFCfycw+TKBRMQ==","shasum":"725ca7f229ade5bd0008ef0d6426ce04de3f9708","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.21918905.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHFCRA9TVsSAnZWagAANRsQAIWLJJyjwCUursyGoGFK\ndBQ3COCEyJEevY5PcqM9+8HWN4ofyzzEqMn7IphDTEjdQC9vKnYdTIhKfEu7\ntUnmwrkmPX5quLrIaadZIjyTrTmskkflZAzW5K27RZHXSGXJ6WovBuXrQZWf\nrwMMRjBmsQKOZfd5c+QQLHpeoDY4j0BWR+dwHOdSN8ydvTIlggxo/0kM+UG8\ngQj21Vvtu820Jzvvdo02T4Zz7yAgmvrrATUvW9pxB2IlKHgkhy/pjLKYhH36\nSB5uXoeeTl0Pl+UoXirFOZEA7rYlPaNmS/0S8m6aUrx6UBzyrdYgR2Nusm8U\n0ZtLvb2ElCqTeGTWpn8+jXPDlrNaOgxZ+QgHFMz23pcm8t2bcdf8WOcrJYJj\nJIQ3kWeJ9qi4Ml62qPchjia7+5+pIGWa7psNrj+FfPbevCZ5pg0AxkiK7pdj\nYw4N6obEl4VTqSZEbEmENK8Cmws8/Nellx/pZ8gXh9sqIVsV6tiu0Ftxm4iL\nXnwwJxGwIJJwQsuWG+eNng4TFSWWSB4GSHVbv/5NElQzuAhi021Hdv3OhlGV\nJJxyzY5O3MtMBYuy9MB4DWwqyxcyF45MHZ/qa7YLzrTimiurrWGJ5xJXDvPF\n2GSk3XsskMv0A6iv8c2lBp9KS5vmvuRcebudvo/5OEQ2ryfht5WT9EykuqLk\n1Xup\r\n=PUbt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr89s75+jOjOPsdQB16KMypTOF0TS1YgfOfbly4kyg/AIgN9Ln7XuD4W+1M9er/zXEVwVC8bHR2JikXugq0VGy4YU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.21918905.0_1628025284985_0.6481490398087142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.193c87be.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-ripple":"0.23.0-canary.193c87be.0","@material/switch":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.7c96e6b98.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nhE8kjJ7aPoqrlLq5kgRFnAu/ovrGXmeEzq/7bpk66a7wiAR7uBO60rljXYi8TwwiwQgEraNQeGH8XSwGXIYgg==","shasum":"b36cab5f1bc0dfb8d4b123c85cd8b526108beee5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.193c87be.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtd+CRA9TVsSAnZWagAApHQP/iZe+8NLVPEFo/Vs37YZ\nIVgKsfo3Ag0ric1bq1tS8QNPrmc6rYO9LIU7zlewJ10mcIWFxmI1o2mt3Fyi\naautdZmDEZaCLEkqh96M84B19qBHSdb5W8vfJr/9U2fFkiwKp/wB3bu5yG63\nAszW3/yBUBejwPAHaKYFa44VLIgvgQqBRqpW0/Z/FfVId48v/TX5fpnFcs8z\nKtSf9bf17ALYuWTyovPw1subfedfN6aXGstjZPwdB1v9zg7/d8WjYagxKItf\nvm36km2Rg5vuz3BikoaS2uQIN8oyXtYBQ63I3f/NpC96QHf5f0LeHRJmQKNC\nzK7f7ACoR6BFIrOWaz6MAFCCC2ui3PfV2+YLsIOBlCquGuyrJCjfgCdFIkwi\noSdvDNrv9fD38gv2ajFa0LbCzkBsIVN0yJGoe3c3s9OYNuCm7v0Wcb6IrtT6\nxKlJQPoVD3ABSbX0EUr5DdvsnAf+qBistVQMLr5W2nAuViGkUBW19+IPyqHz\nFPHm8eRRF8/5yUHdn+Oohet973HJBQQdafEz7ww4dvvNqJoviRnJncW1MMhu\nk234gXsodzoo05fJEsRZLfTP1TjG/En84wCotl6JDWK3H/AMjLG7FgIHudwP\nu0xU2a7gO8a7Ye7b18b4vVrt2YOYHVOPh267bZoJJEblg+YKIra/22ZQlqEy\n/k4n\r\n=VFqQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuN+T/JqhmuHx8RuXiC3810vnbUnrcYsl6fYJI3Bzr+wIhAPEsimxIOnOdi2aS1ZNRZpbaWrscIlMD3OjPnwHnS5rE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.193c87be.0_1628100478453_0.8801045219726173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","@material/switch":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.3dd611091.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L4H9YGkcCe5hfT2LoAK1UjZOW5jB/7QLuTOujirheIt4Bgpl24r7Zl/xvbVAbDbOCuPlWmbQPBTpGUd21sOTDA==","shasum":"b0d5605d95d81d25a4ba0f2000604c1e128a89d4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.6fc52d8b.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCm+CRA9TVsSAnZWagAAh5MP/2TbQgwsvalS37mC0wKl\nAZhU15h8fb0pDMxDdl0Cm+idSJqlfbouQIuTZFOe9GECmNIPHVUPlrydJ6hP\nf8nPVqY0ofdNqDHGtX5HmQviNCGYjXuYztbRBg8PRxfU/g9d5Kdr+2GkflJ5\nBIs4ApbFr6tRGDSmag3Ss2yqOgGGHq0UzGEe/DZ9lEIUq1A8UTuAEsPRrypR\nNbV6IZB8YtwBXBbSz3KwRdZj8hSwY/yCqijCgz+9MeuAySOVQMnstXiug4LV\nuzb3sbe4hi3aCLKNZ0SSczgKgTc+mUMhwcO+2rzovUdeSZbCXcABG/++Ka3a\nUuQqeyp3S11/UL+h6/UcN1Gvx/ZztP/+nuhyXw/FG+7EMYGRYlEoe7p12WsU\nK+pyXOX/DGIRWaYP2mLe2qaTrj33KVc7DyknsqGKHB/Ovhv6a2701yQrF/FY\nnRLUnRyKAuIXoj7NYQ0fSh7KRoX1CDrXG0NI2dAyW5AJqky4lYyspU54onjX\nzI7Mvt/oL2Qu1dNUCydj2Yd/ite+K2LABnUGVGT2N397n1K06Tdi1JXT1hlc\nI+4xQZ2IBBpxmiph7f3vN57/xlChspH/30zbuRDt+SRSpAzRDrzPE8urVvTu\nKq+m2ri0VUyIQB0fJG8PwfVXxYdQMkVVXV6GGLWGHjN3YdTKw2fXIEIijnA+\nOZOT\r\n=LXan\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZT8bbXS7hf5ICt8u1nV2xohaGIs6f4J7WTKGTCw6tTAiEA5NOn96byOEUI01NnAVEWlo0v07kxRFjZXVpDUw2io9o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.6fc52d8b.0_1628187070274_0.6873936894644428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.e2e9777d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","@material/switch":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tzlligNXytRWKqQA0ZiU9YuCZmkDwtnFcsvpySObr/jUPmV5wcsCsiPNF01UL5O7hZmfk0LWb7BuTNyRiaWGtA==","shasum":"645e148da099a61efa976646a8a6e7ca2b5d6da1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.e2e9777d.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqSCRA9TVsSAnZWagAAUzAP/RXCK2R6V2ZARIBATmrT\nwXLgtf5/KQudXhqM9Ft2ywYbjkXDir/V+FsydbNQbgHRnSYIMJVOsSNjtoGu\n2RI4OhGSndapbsrQ3o+QUBdiusVQjRtiHZAkaMtn8FQNAsyZL+rGQaYVDsNG\nSTPD9+DxH2gtCnyacnJ+InMhj64PlPtEvGYMf6qA3dqXwM/udRVg3WYDvcvl\nptOI77s2T/kCJafnukHYGnhe62ab3Y1kIqU3zIQ00/sp54nm13K9GXcU87jC\nH04ZYeuLYEj+1D+mAROORL1+V0NpA5fsX7st3Tca0DRXdG2iOtzabcRri3/X\nQ+TyS9FTfGcrloAJnAzF7p31x86ikm6JofA8qM9Q+JiKzjoePgLhE6VVtKIY\nlXmZI+UKd5jDj+ugHR/EfK2WihTSj+3HQoN/St3Ftyithr9Hj3wLify16LvH\n/QVB8RjRaEdBAwRPzd5mVx/djaJM1gaAmUZWNMWmSpWSJ4F/wajRMB6QCv0I\nnU5e7eerNuW70B/mg6wG22tTd2TTohf8jopzsTH+NoAH0JI9dOEh4owA8pWg\nBRONfX5eRNGSaYUc0ZHG+DgR4KFis9FwluzDYuYtLaPi3XmMNgWY17TtGJ3j\nUdN14/hD9E2+EEsxzb/Pj/bIuHJlYGsPx5x9TgSQlduR3NakDGA10dtEjuKV\n+Xez\r\n=gjZw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaWQUeXzgT5SkRTMGhBdBDDkwPCOnxXd/5VDnXHGupiQIgV1SHFvq1J2DxTINGrSfZc7OX+dS4XsdHJl/1/JS0zLU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.e2e9777d.0_1628203666382_0.2518242668584143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.72ff1e68.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"deprecated/mwc-switch.js","module":"deprecated/mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","@material/switch":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Checked by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch checked></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch checked disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-theme-surface: blue;\n    --mdc-theme-on-surface: blue;\n    --mdc-theme-secondary: red;\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch checked></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `checked`  | `boolean` | `false` | Whether or not the switch should be checked / activated.\n| `disabled` | `boolean` | `false` | Disables the input and sets the disabled styles.\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-switch`   | `{}`   | Fired when the user modifies the switch `checked` state from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript.\n\n### CSS Custom Properties\n\nInherits styles from [ripple](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface`                | Fill color of the thumb head when unchecked.\n| `--mdc-theme-on-surface`             | 38% fill color of the track when unchecked.\n| `--mdc-theme-secondary`              | Fill color of the thumb head and 38% fill color of the track when checked.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xEIQkv1Cbx4l9oV3TgifD1ftI2iq+QIyzwXI0NdVzhSUX140RiUAbv2c/jmITj0wDTNrDx+3XvS3fYiod49CeQ==","shasum":"f6de92d3a7ce2c403ca4caca309b5380428f1a43","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.72ff1e68.0.tgz","fileCount":14,"unpackedSize":42616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBDCRA9TVsSAnZWagAAVg0P/0Dserg4bsDilCOGH7xT\ns54NcgXHT7Kz0ZkJhS5YUd0JxZ59pCzSTUNtlzzX7ulB/KH+YaoWSAbA0Zp8\nhB3LhWMcCeAB4iZBFygBhgdSB0YMRIaHNQX+tLWpkBxGukokDoGv8XAZbOgv\ngD1njdffvL7WTns6SGMQfN8Izd+D19TiobfDecGZa8jEMD1uGyrZfaGNlz/B\ng2OLxSChb811I3JaD93Fo6JwObHxkRiDagteLci/yaZJInELVb2XME/g0zcB\nhhyvuOLOwKSTuHdyC9C/UT0fiR9gjtMlOgY8r/e/sg4U23C1eHAugph7fa0G\nbI0HrzhhC/wqJIa88qbgfKaBxHcnc+40U8J3gGr3IYjSVqlmYIRokpR4E7JW\nfypDjR9+XMDAkS8raSxIazdFY5jjLM+JACVNl9WXl9nZk7yOrmVjKOC7Sj5U\nEnUtv3UqTBj8S78SQVhJd6xkSOPHXR4FXcduUh32/jFnE/Koq8GSf/IQLgDV\n84fcyY8vylfNRMKLogOtFemHsQWm1xGRp0GLgpBfdBH6BBpS1O+uUuvtv1s0\n507I+9WLVyLBfDmynCX1E5djcD2DGEjeSc0iqrz/lkXZrio3JE3vrrjM3Xyd\nGL6piJxhuiU7oHvmrbG5QdhwU7IkaXimIn/ySMw1NhHoU2HHkxclMwoAqq8d\ncJTL\r\n=5FUu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCRkxhsTIJE2bmBvgATcpL/pvF3lyISuisc2c8l18AyAIgVvY9lRzWxIUjxzmbMOet0QafLb3qCYySwFL8h3vmMlA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.72ff1e68.0_1628282946968_0.27953276401871485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.c527e93b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-ripple":"0.23.0-canary.c527e93b.0","@material/switch":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O8hkYhFv9+K6mYIkBTAd6aAyY5DICn5xEQ6GqOKPBn/eFvq3qX0a8GZbm9tl6i1rK7uX4dseV6iBeo04qR4GSw==","shasum":"141dfd24f867d2669afb260e03c379ba45752b74","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.c527e93b.0.tgz","fileCount":27,"unpackedSize":93697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVaCRA9TVsSAnZWagAApH4QAKPWXFW5AJHolH1I7MAt\nMcpy/6LyGIXfgu6QQeRG8nmd63ML0PsYUuwvaZAUcmBm+AP3ff8i+MeAYAae\n8XdiX3hOr5pIlfhQUZXdoZDx20tAtxbnDuRnIh7ePaBbd8UyZ3dfuT+dkLrh\nuT1nSLG3dFH2aL68UqPw5dyg2/KxhPEu9DOkdwzMiYV1+ietmp2YLr1cCu6N\nmSEdMarAWpEX+pEK4+CO8FtyjP5jmgebEQhERGTv82JLCd/b0KKGyL6WgXMA\ntXyakpu27sduQw5k9HjWorsnn9a9itNgSTanphS3MXqQrk/gf5b/e8H9ifz+\npTSEd78o3UH3hIaceY8llu5UWPAUY23wYuQhg7yPJhTTPzQZCOsaMofAI8hl\nt2aXo3bdZliF0+tOXyS8NH/7KjhmSBdC2/Xq0U6gFrtnUK8zjiSb4Qop5gPG\nVQaQ5ds3BD36XD23BmSHRkqUOE9au70uivbdqSBHlURyACW/vpSQRXMIDMt6\nZ5NFs0UhxqS08kvH1OjOQUj0CQUl6cNBr8LVVryu4d4x4KKQQNiKgU426wVD\nsQUBHyAghyAC/H8VMYg00kjTalZ4NTxmngq/G3Z0wOBCGFOvNk6/8CoYUboJ\nJgZfmQbkJjL244TLyprmJR5FiBwYylZaGQRXNixQze/qyK8ijSGMUWhOALei\nQZuZ\r\n=UJAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+zthi0MGg041Ni3fPRxulXcdv6Gd4cRVhMHfRA5FwuwIhAI6ptlLXy4fsQsdvXagKP22EgVMikk3bIgzVwdPaYJxT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.c527e93b.0_1628284250162_0.5786483648467635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.78b1eaac.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","@material/switch":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/Ve9c1fxJg9ZqSppKSyasKwQ1fiW33qMLwl5vTOd0Kuwe/xnrT+MZwkLQwt7bZ3eAllgbzcQzroY7eh5jz49/w==","shasum":"394dd9e892a975c9a5875cd0ecc052cb2fce6c09","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.78b1eaac.0.tgz","fileCount":27,"unpackedSize":93697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4aCRA9TVsSAnZWagAAXkcP/0GwC1MbEPQ4+wTv3SRB\nR999qa0bGL6552fsUe/UiAijdxF9I8wFxKAwxeANJkMAtzyWodUJJDmWwlsM\nGisl3+3wBJ38RY0V5gv+kyM4a/S1AuXO1RiDaJJKbGyW/ahV2/zJkDW0YaD/\n0jTVXhNVLwS/88GiK03/TMvXnEmsBITnQ30hf2oCx57aRHi9YOhiKdji8cTA\n3eJ82cNZiPWzt0ipiET5GTHQ9j16cTCsuzVwH18VZnjqg74Zt0nT2tpKpyjy\nmqJfN3/GyHt3MAf6LjDr5pPLxqXytXyaATz9SvyxkJA+0yLDUG/o/3JNFKb0\nNdMp0rxMP/ArySH8LYKvVH/kZDcjawZxljcoqthH2NJXApEkikeqdnoHO26Q\nLoxuXdEOKY2Xxi77nvEcZABPwWHlwjcPfzrqkigJY4DkEzjedg86fhvcAgNB\njs12lqBwVMlLoHfF+qTXyxMc59PN++c/FV14r578vMvqYbzOdrJkxO/8rBow\ndFtypU04G3/dYwuDBmGZpIAdzaEtdIQ/OssYHaX5xbq8JWidhsMK+yyn/dYj\nwqxAIWGflm40K+D8TCraMZOj7OEQNGd3NJ0q+R+akm2MvEPs2qjLA1NBgaFH\nMNf0k6ox7Up8IolDFelJj30YmJvcMNT4DeHe+0mlDqskpa/l+kJyXkXLV6ys\nWimg\r\n=pxtt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAoeIKRHyGknoAMLpnoih7/MxtHY4O/aDGJu8Ybf3WnAiAJ+AsrjNQ8YQH/0MNigqiGIaLR6pMgwulX18atbWMjHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.78b1eaac.0_1628532250377_0.3795346403487676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","@material/switch":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.7249a3060.0","@material/ripple":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qgEkTcxXeqzdLDHn47JtjR74AyRTTvRKqDzTmkRmuuihhWrGi+WrYDxN0gJ1fYDnTbEj9oSD2Hm1RxKJPS2+vg==","shasum":"a580222d91415796b76f0ce0ada73602347702a2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":27,"unpackedSize":93697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmzCRA9TVsSAnZWagAAFI4P/0/qthSQoNwQhDha59uR\nO9CzrF6i5tZyoxQAGVzmcEmtFMJbZ+YNGiQcGhKmD+a9+/6RVld0dgnumlRn\nwJDIyH3ze8TozJxFFStwC55/Ua3Ybrvavj4YZ/WdG9b0zMmd9cjW7AHwN8Gn\nmZg8tURqwalqCOha3ke1cnXRyle+zigOuIEGm1nua8BKy+XEAnMJhwVw+5ei\nm8nh9D2WuH7+fjqVtIsmvgVr31++XQmHM4fUGNjbz+rrSbCHSAAMI0FvyKqg\nPkDRiSwyMj9Jh13r/2TS9/a5tQ5G6fF9CZCYzZ8AFLBxkY6QRC1OXcxXiqbF\n+e7UZmL2HceodWxxShYjCXHRIyJz6G3PKoWsKhcl+PeQh6Q24ylIbDweoohT\n/w8sFjBmfVJaz/Q8inX/4SBY2/9f85D18E0BDBxWASW8wAzJ9gN8jDu05xkO\nEGkniF0qQO0I9xllbAg++ov8MCxG3qvWLop/E6fKT2bPKL14msp7MqZY1zfK\nPrzk6YWQx8eeDMnP19B7F/AzNnZiUi7q+lm5kZayFZ4LmQyg7YwP2QfOoYJ4\nj6mfo0DdoTJXovH6Tvgi4rjikbrbZQn2uMRDX0bYwgaCsFiJjNW8s0pXtLFz\nBl1zJUjmjgo+3UN7lS81APB6dY3XvEpxa8f9HswT3OirBFkkzyxQmdSOgZbD\nFRaN\r\n=Nxu3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFVmdOjGpQNviP5A4enpWFhRrQPcL8TunV+fiazg6TZAiAPSbX5tW89mdmwjyeCvaCJOid7rNWo84rEpG3EDvO8jQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.a8a4ddc9.0_1628621234911_0.28121874185500806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.99fc0632.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-ripple":"0.23.0-canary.99fc0632.0","@material/switch":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.f4241a42a.0","@material/ripple":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qm388tOsJ/9FcszumJhovRuGG/MYZuuidnGuQ8jDUI3SK6zNYKqp0Nke6FK7hMyNz83PG+8d0Ia7VkeTriQD/g==","shasum":"520accb6235db81e31aea6c65706d531accc6cc8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.99fc0632.0.tgz","fileCount":27,"unpackedSize":93697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2DCRA9TVsSAnZWagAAyBoP/jD0DnqvyxqJrGpuS9jc\nu9QsHNwZkmI5QkxQ0ZIAZ7KwvDMSqC9DGSPWxvQxWJhYtobBWBcApfcL2Ig2\n9HnKVim+DpDO7cTJnmOPgMwmiNs7RsrKIt5UNQ3tgWvaD+lwUJPh3r0nHJae\nZSPVLABT4sRSkrAY0rLckYpIkbQYY5KN5GhF7fM9p0N6Lp7YWh/+J4YhxaB+\nv9BhqXXRjhM1sx1sNHTrYf8DyTVW++vZ9Tu8Ushi9DQVTlEoCgM7lRclwlEU\ntJiVP7OkUa8JcOpRf4Wak6pWuNo90deOLccQRVP0L/BAlKkJPwM2i7gmDlIY\n3bVkKnEY7D3dW6jKkAydp6wJlMiUgjF/B/rP6EzqxSLuh822bWkfbJlKqOvQ\nYdlVtUY33uJil9bZlyp6ocShRa/fRA7RkptovhYKKFt3B7D8pkMhnwDsv1lC\nvfxony9O6Fb1//bE3XIBW6KutlrYStJzCNwY0WTa4nF0fD6HH5lRs/T4R5+g\nww4UFQybJcN/cdCPVdoYebv5zRLeEyHcUXG6ekGI5C7M5f4VI2KPA+UoeYEF\nobeocMr56/Zy0UHWmluQtGv/9ghfgyNgpfNbFTSuGgni+D1jcGAlBrr1lDf8\nKNl5wFBCdyAJlgvzds1Bl+zAX3mc7bJyik/+93Ttf9gQ4xIsLquhyAZZhjWG\n6NO2\r\n=3qVh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeDw9sfx4FsgqwVKek/E5zyWOq9tloHL0s4NHwNIX3XwIhANxWHOng41NhrFNIFCGdWkLgsFpwyvxqN8KCZ+BBbaqU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.99fc0632.0_1628720515581_0.9751774472772177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.3f47ae57.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","@material/switch":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.0ad12ed3c.0","@material/ripple":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LHT+HPe2hgMtOQEB03ui4Gg15X0/4hPkKLiZi1BCwkBp4l8J4XxlL26MzQGwmgTBUQiYeKFf/K+nHrZe0ksUPg==","shasum":"18ddcf2a4dcf516ad69705420380873cd4aa2b1e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.3f47ae57.0.tgz","fileCount":27,"unpackedSize":93697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGzCRA9TVsSAnZWagAArQ8P/0lz4v1utgmX0alhik1f\nJg9mL+lf1EC4iKO1J8UGq3FewDMjIr4h4b1lw8BNwn5GQwL2ca1ZzreMd87r\nnyZ5ptwvl0RYg8b6NLyV6JXLUlYT9SnY+OQOfug8aLtNXBjWBMPv+UHWWlpZ\n/CeeV/TJe0o029TGqF+S3/BXvRJbSdkoFRm2FOpLcO/EItADXz6aQVf5bPyt\nDIb+GZcsxQDLTxYLOQ1+uoccis7Q6HMW6yA+oCagKu6VV47coZ+CXfUyuOe+\nEHqqLx6h4MA/Bzu2ZCncU98Eudf9IJe7I+omBAqVI8Yvp4PMZXHLSoL/hqyq\nhfHzoUUYsfGJfvkI1D6PtQedrdK7wsSm2d+L+yS150jBrS+pcSbJhbC1BUAR\nF7w6FbSZhPemkfODJyUK+kFxaEejwQhZNALEyzLuSjZMeZY8EAhyJVwEu41y\nfClAofNpojG7V0qRM+GK5Zshr9YpDjuQM1cArGZtWVofmkh88TPPwyi9qDhl\nzdnRJvhojC7cIdUTPTbjVqf0y7+JJBlMAXn4hjvzhwDv5sHKGFpwAQXNNnHH\nbLHT2AeJk4JWtBBNSoOfc4hfkS9ln4vQG5HbXTA3l7qYYm1J6A+HTKHtQUTE\n6gIgaUaIwT//AMkEFtsYE9jBFiR7dHtkSuoAuYsRZKNlM/6KPviIidlT3tze\nLgxx\r\n=eLaG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKTbzaaKN/Jh+6Vlbif+4nTfO6B/50S8SsDQnpRT6hSAiBkL0lHxF2LpPgs2QjhZ+xK9IqK9K2k4MXwADKXe6E2sA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.3f47ae57.0_1628791219659_0.2005539728929906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","@material/switch":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.077dcfcfe.0","@material/ripple":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WeztEeF4UmiU5CUkB7NsO+Sy3S+MzRp7EvrZiHLWvZt+r+2v0duhoq33oYccHaoDVdclOmcgdagIPJ4l6GB8LA==","shasum":"cd781aad91550ad59bf7b3d46b73fe3480fd194e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.6b9bfc32.0.tgz","fileCount":27,"unpackedSize":93697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdfCRA9TVsSAnZWagAAfl0QAIkfeG4cuXB5yG+J9j1w\nuseJ8m5f7KJBxit++JzdpKR0Inve4uvRW7UC+GILJ2myNlLPpNoupOkU5rVd\nLndbm5roMz/cPATbEBVngR//obN4DgBZsFbOf5W05XLUVSC/Ri0hKrdPnNXA\n66lO1i593QjQVxuTDNbRPPGeCOKdxdGaF1MwYbfhg54TFg3ODkgFPWPrJptc\njp/a3jCitTGQov7CQ+YYjQkQsIohoSLWR6aXsbJ8BzCJ0AsFhfstXCOFUalE\nDXJ8AwH1yIZPBk5xwUfAxUO42UjfGyOkZg0Lc7wQYNvcicY/eazlYF9d4AnU\nJMnR7TJrPUQCxSqhuKTD02ALxHRDOLGbLt6fQoyrQi3bS+9f6s6etmd4cwZ9\ncCS5rOn1GXwC+Qbog1C8UZYLRZDe6vhurM/92RyKJQQkDNkpGGgCmAO0Ph5i\nIwOq0IcY70AHiHMuaxTrLYz1fKQVohz3x86MHmTGWd2GqzpKqzFmeE5QzGh0\nI7fxW7TG5GWoK93hJ/KU9GdS/rHBmZBiySgh0f3uMm2XCWGqUPTdmZvl4bRL\nr1zr1k/PgB/NenPg1qWwc/yuPhNYRxA1vbwdHC1ZqrTHOTMeoZ2ysoa9nnAe\no/erXcX8jFUQCqfe5JLb9MON1eaHYzsb7SUsxkhlaLCcDvH/wUDA+1xwHqif\n93Um\r\n=o0rZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUZZP6ardyj2AQHtZJWCD7In9BSrbdvgZijSV/sDnCRgIhAIFV1mySaZeeFv7CGN8X9qgj/sPZ3/OU5kIyZW0W6T0x"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.6b9bfc32.0_1628792671171_0.09443601576063787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.c89ecc63.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","@material/switch":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.2fb068fb0.0","@material/ripple":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k7/PEIEujlZg/XsH+jZtaUZzxVqYWl9poKEhgui4ogITEtg5vgdkWrZZudtvZWVn7oSqQTUg8CnEaYLFTIRI2w==","shasum":"b3e0d6066594dd544183cb4f962155c654c6b87e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.c89ecc63.0.tgz","fileCount":27,"unpackedSize":93676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2cCRA9TVsSAnZWagAABA8P/1ZWjYfroNq2fPB1i9QY\nZLpDdOG6aKivt8j8h/NBbqly0126zNVhHpYems0tU/WkFpWf0zGnZOaSlItO\n+eTd49Hjsfkgz/NsBqScja9oC7i4fZmoNkzA+xpyeH4wZstV3CDFV0trfy3M\nE4Pj/bie/khhu9itfTzPtSit/g83YPhH5+2iOtbzyGxWtMtslDqTw2ZxhkwF\nP0pOrO/uAlelkkqz5e/iDS0Xc6OPWKbu4yeQCxxsJpEnueJ+rsLBP5R7j9/c\nX9Fs0UkeS9RcVE1uiqoyqeVjA0vIdjizcr2wKuTOOTIRbC2eVzEE70NtxBrU\nrtOMFpT1AcpMyHhteuRUBFNVwdA6ZQ39s1NtgJCc8SWsjHgqNViZdSUDAyTx\nfDv+3GMVy3srQRXKIXjIwdc0SgJ/V59H6VDS4nprnmM20X7exSSRO0tU4rXO\n/Djvn8O7AUkxU3znYomxIZuzM1WdD7p0NmTmWKCTf23ReOd2jWguBBJbzLRJ\nQaNYhS7clRiev4tBzMhYprEksyvwUzx42Rd+PiDrZseuFvX0t4c37ycwBIeo\nDTQmh3TcUqQHWLTepHdsuXGG9Wvvc5eYpdInlNSUwC9agdwb2kovrvAkYDLG\nh7YAS9/bp+sZ4qtKhn4UZZ1dxOwcvzIFOUROpLwRlUvZoYtogZeuMt3Vi1FL\nPlzc\r\n=vmld\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRNtyCHCtTKvJr54eZr5in5MMTT9jQ2hWP/hnTcrlwdgIgNMGH0qbRjNApcSbKi1ATP/Yb8igg3xy/2GvuH2s4/ro="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.c89ecc63.0_1629134236680_0.9643629063397354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.59de86bd.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-ripple":"0.23.0-canary.59de86bd.0","@material/switch":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.457d89aad.0","@material/ripple":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nOc8OHNv9C4thGZTr+A5GgQipsMY+QR+UMACZAIb4fvToJyV4z4Qqsh1/MbOwkXvReDYcCfdlEbZu535wkgmEw==","shasum":"c01b825efc32e7a28bc4eb03e5d7507a2640142a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.59de86bd.0.tgz","fileCount":27,"unpackedSize":93676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSiCRA9TVsSAnZWagAAjhsP/0ycMRpJ5VH1Qt5oUIHn\nIJ3CDvP+tBHAMLcHbRr+hQy4tjjloVI2aTgeDd4FPT28wKctOtuesXw4TM3T\nzI27qaO/9nTqA9ikmjeqxrBYsZOSC8dqITqM8llog+dNEpcmBT+ghCpDt9mM\nSlDxbfoffycTObeOBDVdll5L5tYwbMaA1/m2Wczs/cAfFBndimzu1p/IQ0yK\noG3BfloHQM7euoO7B1pP8SORZrADo/xTWNZEaslhG7qwxG++DXv782YJ/nt1\nWJwTj+URpti0JzFN6ov06Sh9WHx7IrZJZuzGhKEi1YmQoZSh33s34qdYvs6x\nzI7tAyZ7EthyxF6N9gM9NDueJSbSo6YHUQlTd7h2udnn7gLH5cMTKzb7ndP+\nrp3Ej1QbrOOeg5JxDyMeOxvIShdDYnbhZtHQklR6QEGgDrqprzjXz1KQaEfC\nVeXuoTuYNmU9bQRgfdINKBdrFS9WBDreQI8+RGL8fKPAIVHCMNw+XLiwnNU5\nKxgKhFGt2+XI++NCNMjyrSYvXw2hOZ0CcFXpcDvrCHKXCUho/1dntLB/onAw\n0ip1wNsQz/UznyGgWLwsDFYRDFovwPbBecJ1U4YSZPaVUga2ao0fts4o8IJK\nw1+XFFb/Chrdpk8NwvWJl7hKdMIkjvpq56xNATpOlqRGKCihLu4IUPJ8G4TH\nIUln\r\n=bXmD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGV0H51zEuT/+hBVRq+o9GLgeYRsw8CyhHZHSmM8pfDwIhAJB6dmCK43FsEkCieNgeoToJsD+AiGPp9KPGWQEgfPF6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.59de86bd.0_1629250722518_0.94192299682118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.dcda879b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-ripple":"0.23.0-canary.dcda879b.0","@material/switch":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PzJo4IfWH2qUnYCqEfPQSJx4KMUi8Ds9ZKYtOwSbrFSxhFkDGqSrZQsdit8E12hqPLGFDTX1M1ph7lk4NJw7UQ==","shasum":"00c85d163b7fdc8f33eeddd8e8575004b6a93ea5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.dcda879b.0.tgz","fileCount":27,"unpackedSize":93676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhoCRA9TVsSAnZWagAAJfwP+wbUnbAeA9GXNym7F/r7\nWN3lfhr5oLMwamM8eTKouJiObLF0FeCpqK0nm0gvWkHekhO6ISG/kqfJi03G\n+HfUntC/t6eod0drVuvvei1lWbVg1DbXO4oBn44JEeF75FNcMMWDd0hYbxvR\nfniw6bFeHPi8oqfju/esfu3ud4i5utIGzgwb/e6C1Mb36BekqT8p1DP0FoAZ\nu7i+tM6r1MdhB2/f6iLwrHABciX5cUyb//7xBdpNRuKydnebR+T3qPprgfnT\n0YUvYElvB4jXBT2Da2axKCq6InvuM33LqzY8+jvb20SFjIGjixYhmfmcH91z\nSzHPYFwe/tp7ccadA4vv8/zw987RUxIowffot/GVjxYihYpyC6OSqbyx1GaN\naQFX3Wkz9AqLNCwoy5vw6PYmL6tC4CuUQW+G5amKAeqVwUBtBzX38Vr+5A6Y\nKRYVCcbGcDQxKhiFkrD/TILRKSrJMCyFBZW6iwW7lA2kS3LHl62i0nl2hDXI\ncan4Rpq4IDfmNT840rLmkRlcgAb5ExqaRSSs/mMC8tvlQVVraM2lUs//60bj\nQqlkSRGi+JeeEuV3x5XLXCozUOaJznZZP1kQyeE7maq1p7lcowkBc+SGdKq+\n+7AOVJ28plQKpWGlm/FICymd5gsCwqL/aPmFHg0nXyz7jI5QFKZGWYiY28j/\n5bBY\r\n=OIfO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJ0al7C9yPHZd0AW+144gstgIoabYudPBMTfc35reSRAiEArlyKq5UqkFI55m3vU6jqYI/uyyQY3nZ3V/yPEZSC/7E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.dcda879b.0_1629325416254_0.758742658789936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.dbb8b366.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","@material/switch":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-41p46lshdPFByYQgHmXqt7KDtbO/X5QTnJOeXu8bqJX+5+BPCX7xbbQgbnX4UoabtJZwO4HuzpmqAFr8T9zZZw==","shasum":"b6f28e2c50424c1388feaab4dff3a0d138f0827c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.dbb8b366.0.tgz","fileCount":27,"unpackedSize":93654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKWCRA9TVsSAnZWagAAWMwP/Rfc7ewRjuhm6xKs/0RX\nRehpQ0A1IZScPAudz6Xz8t50eSY1CyOse+hA7rBqMRFBb2DstRgYi07egcG5\nTh8cHYD3hHIZShIb3HjY15B0011Y06lG0mcVtRmeSLefITdgSM8Xs3esg9PE\ntkml11unsTqJoh8R4+QgFhLujHRvKAop/aSA6WxAYZDoFcXnO+BkBzVSaJ95\nIRXG1ZXipUTDy9BNYnlWh3Y1vif7x27iRfwbLss46md1rhPgqBtZWpPRsGWX\n+pxvv4pNM+W/Aa3wNqrL2m26gXVk3ez+9WPen5xHcdyShTNnKJId0tdMGhfG\nx70jh3CLTmtvHVvlxGN0WkejcHz8M3B9W9rx41mcWTuNh0OHbVdYXqnHkr/D\n/Hp7Q7GkeVpMpQAmi+LqAcDHm22v7WvLuD/hDpqpyD99aKJw02kJGHxsag4h\nC3Yr3hWFF7yPjZU0ayuzfbabCVNvu60qJlo6hwwdCrUpVTz3ItkUSBhZRHjh\nhuX1XxCotF1GyzoGrNYZfQaR+nr7AkPD3xepe9ZZC51EVKrThTCk86v8rf9U\n+DhKpGDuGo4b5vsa7ID+mfGA7LRNeXw+vRAO5yyD/3PMskw5w8QmXJsPWa98\nF4GXa/bvkRBN0WLvk85IPD3rxs5Ez2JZBdUUx1PMDpCMoirxVOKjJ1EG5LYY\nehZY\r\n=bLKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRQ6EZeKQ9i9JUOrL2bIJljja1tNt4BpvtLu++ymSwjgIgbSylVMQrI9qywdxTDe1yWj2huJW2IXkyte01B36U9DI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.dbb8b366.0_1629414038544_0.089496333820557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.c6e3060c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","@material/switch":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+gJtJjwl/WrxERAVmoMfwCVOGksPd/C45KKMnRfoiK5Uec1kk6odY8gYknK3xD1HS2mnZFoNXgot2wJqedgMpw==","shasum":"760e2aad0ff50a3986583e93b8f57b0ae0fd5369","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.c6e3060c.0.tgz","fileCount":27,"unpackedSize":93654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMHCRA9TVsSAnZWagAAg0gQAJqsSviLDpcK8aC4eRw5\nK7b2CAgN5aWtMykeEqmQmecbI0NuOL8ewilnKdsB6/sg8AHbd+WRXshV1uf4\n2O5rxviJ7W6H4YC2T+tBDX9DVFLoLR8BD1s8aPa42e+FnUkvNbuIdCkJ/P4O\n/zCSaDh+nLlVGLFBrllU5DjqBw5/WUnPt4mmlzjfxL0Pe+xJu54Nwfzy9kmd\nxXvwVhV3c/nb3IQtf3LftliJBPCKID6ZHJVZT0sGR0KKQsSZMe0+cF5V61Gd\nm2z8GfQmlUq8xBhINi+7qFrIiS0IYX95sFGvbSWAVTVifaccmi2EyDl7DdI2\nNcj4eNe1oAu9tUVcVr7f9tbo2ewkD8oypp2k9sTbzt2wbKS/YkKjUTgNzLib\n2m/vjl6jWib7ELbkfhOGPwX+iPDKMBEoaQ/5tQB7vp64oPSlOfwVSgJcXkC7\n0ac0uGH2o+rGMMaMZnoiczdqZAQuuekqe1wSEm7pc0llDn043byFLWBaJyU/\ngIYCPdL0o3MCo4gQfM8yDulZv+5OBhQ9SIGWkaMRbqyXoxcgNqW0bvMxDW8P\ne/D1yAiM1PpOHvhUOm07YhHtdUNJ4usFhA5T6XITG9RJmV8Yk+qC6rzGEFj9\n4j/Kzn9d8ZNvE7IuWxYG8vkp5oOQg67zFF5uyHc7EM7GXUmv/Nm7HusIEo7F\n7TE6\r\n=aQ27\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzvR88QUfj/EOMWIFm0yGyztj9PcO3Kn9ou6h1IhLlgwIhAIL4WnzaPVlvZnp1jgj12m90kmxwwqkC4sShCO5nEBN1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.c6e3060c.0_1629414150926_0.5775597684463452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.03120b7d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-ripple":"0.23.0-canary.03120b7d.0","@material/switch":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z0x/HjQ3pB0vzZrJ5V+hLDzkvd7b68q5/zZPwfAKhMIMGHzYey8JtPNmNKkOQXSjKO5oGzkpesEULbAgIMbHQg==","shasum":"d2abb1f09e1b30e05e42ddf027d827d788f35c6a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.03120b7d.0.tgz","fileCount":27,"unpackedSize":93654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvb5CRA9TVsSAnZWagAAjGEP/jF1pfHc3n9sI4ubep/Y\neJipangJxGwHGs9F4vwud2nC4Xa6NOoJG2nOZGEc1zNl5fkMSAEHAMgnbr3d\n4B3K0Y1Cv94uwe6y7sN6fS2re96hQhIcV0nkutyVovvY+BAIy1U8phJhUr0N\nu6Ubs5NQR/xr8NuAakxJAMKGbCXcplmEENU9ZC3Jyt6b0LezMID8kVq1FYOQ\nhE+kj+7k845if194H8NJYcK9OkqHusp84cE05fe6S5/qmXSeE6ZnosmkqpmG\nFw+6nDeW6O5hStIRT66dOQrlG4PLuiJkgbEt3mXQgxD4SFeop38uTLPFeGVp\npBdXiZvR4TTYe/RTsJ9orANGxsjfA2qWQeLH8KZUDl3082lwPoHp5mYpeEzF\nuhNk0qiXdwWC7ebn0OBA5IGYu4/VQWF3COAOAqHosS5TugN/bXZ/vN5OXaXv\nhBL5G6uNG8DrkCT055aCDgNaKjkbaOVW3GfcOBb9eMJyS1oya/nTuEzQx4ZL\n1b9QAAb4TVNk2LklVGryBhVJHjb7ZJgC+uAUu5QKExcMWCSAUVzszMnKDiFU\n64UCLbb9K/RXxZoZkIfGwDYblK9YgRMqY1ZQBp37W77tiJtgQYwek4ZdXU6s\nWfYpFegYCgfUf3jkCoepAwsRr77Ur0ZkXatvSzzvO+nTUI3i5g4EIA0ExBBQ\n12Kv\r\n=F62g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0ggxHSnBFBITfdX4vli7spduUe5Pzx3dERq09iv6AfAIhALxM58sr31K3YcQ7/3GeDWqCcCZ/j7MEuQ1bHa5NN3kz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.03120b7d.0_1629419257199_0.2798010855485349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.d75a5f74.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","@material/switch":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vljtE1OlFTksHxkAvAPHXiu10nEeMjJyrkwTBq7jh3QNg+GFW1m0sDhrpqZ+lyHv6u/az84fvbh++monXRIDzQ==","shasum":"9274080ed8986e868abeceac51ca5eea26752d67","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.d75a5f74.0.tgz","fileCount":27,"unpackedSize":93654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2A7CRA9TVsSAnZWagAAyhUP/0hMWA96jCDONzP9M+DL\n/CWsi8HRKpJW6KycG76t1IDjPaKEHUzlPmYHamRahvp2uejBOfIG5j/ymopL\n0TRxrkEU9yPgSe4Nb2QF4mdQgDNRn699Jy9L+2+aZnGoiELmTJjARar5jE3W\n0VhBJtCCc5I1a4xADPBq6iVOGIXYEl1M63yuULhX8iqJ0qVy3n6IHL2rzoaK\nsK/8s7FRS55JMgJ5QpTFKyznfqVQQcLuejkJOQGCgI2pF2SVcIaCOcjQxhQ2\njTQh4U0ktDuddMGdaV6/JVylFEql/OXxZV2mzj8uXeGyza77gJaehBz3hjmj\nLQUMGQ3DCSWaziyNudkQT5m4matOqhXD2iLRhfOxUIg+CpoNCL3oa487ZAXi\nOB9sqqviu1+/sVhqiTLRLJpQWrK5NiHp514bVF5H/K30BrrJokJFW61qKHNX\nnfcdR0IZe2TvZOsYMMQ8+bofWb2i0SF7PDc/GckM9AdRnL5eIDXXyJ5pRzOZ\nGo4qEiPBbP5FCKg1Kb+lET++hUieW3TrHTB4yaB3Xbzqn0aSgPnUnCIAhChE\n1ROnacBAexhZA1qgQenfkgzt3CW2FfJw0Si160lNR81CN2N8twYEerN9aQgw\nx2KKaT5UofGtPNfQc1L7izVNTa4e9qrQ3aDH1ALfSHec64b0wVTpBmGmK3Qi\nly+g\r\n=UJVb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLWF0GpO7q1kAiNWi0dojU9rObeBKh0A+AfwVKQv6m/wIhAJPKLDEhfLtRnWgmDjr2kiOMsIilBdQLam4WyDLhspwy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.d75a5f74.0_1629446203657_0.8579753770577332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","@material/switch":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OZLICam302Bcivb2avH/AELXKJXlAiVLQFQKX5mfnaB4H6/5TkCUMGXv4N1XGy1JgsxdnDQRocXqcSvQnRLsCw==","shasum":"7d4b5a6d6d3b723862df22da97aad0d0fb5094da","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.3d79ffe7.0.tgz","fileCount":27,"unpackedSize":93654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SrCRA9TVsSAnZWagAAFmsP/2agPVMDQKIGtI0aKEQ+\nAiD48l/tULUm+M26yy5jQuip+3k0CUa0FHVqB89I4KgguMhtZHCXt9EchEsm\nnKf6Beka5qWdqoUG4BLfE47jTarNEGtGcSA+3rcNV/aFfzmkHWzPFeIAfuK4\nBefTqLqWE/Znvkxi6Zcjsn+WdmGoEpDxlsrm2+atvR8PFtUupMMLAbFyfJGF\nTVG/Jp1oFuhZEf14XfnJAc6EmPqRD8R6XSQp77sg3mnSpHVlRJKIXXmJaT1b\nWnkqPr/Qcuyss3HCdI8mtPhABmueACxyGOMBQngR3LWk5M8Ein2jo+70xZuI\nX6Sh1rmaFXEqbD5H/Vh6IlkaB9HKNAp+QgCgZD2RLQoGyyl+X805XBCuZhHD\nlNMIeIYf39f368xWp5myt5Babl1CB0EYEmj2hzSPp3ulwexpjR+3R93ZIwNw\nuyaOUyt92zbuUfweis5Td395we5BgL3nNnVNY1qvfPwVZvMbrEFzcSUNKkwk\nZWcOrjO6Y8LBR3hiUS3d+1A1A2EIfcjdowx0lHhmmbtBoTggzFV0qlUsiDWK\nY7dlHKpiCmj+t1T083e143i1iYNB7Bi1lg3WXSUb8yUnpnAj5r8E2KeRFUEI\nOPGv3o+JFqe4rAZA5Eh6e4k23UiN0Abp1ZtP6ESus6WcRYafHyLVqBx7NvJC\n1eae\r\n=yggt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC50hSMjmppjCGa44uDX4JoSMj4hsgllwZIgGyBaj5icAiBfs0beMox46JSuACeSw2CaSLGc988MpfodiJHuijHa/A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.3d79ffe7.0_1629480107768_0.4603648284859778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.02213ebe.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-ripple":"0.23.0-canary.02213ebe.0","@material/switch":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K0qzpii6EnCEBLFjrzmoSwJzHBVxBrR5/m1x+UzuIVUQd7TAc074TW8YFYGZSIdO8KXk5cW3cKO4S/CbG6EO6Q==","shasum":"f0eb853df6b1fcb3b926721c333914d1e014454a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.02213ebe.0.tgz","fileCount":27,"unpackedSize":93654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XJCRA9TVsSAnZWagAA+JIP/RG06TmgsaD4738hwzqW\n5aQtuM4xPgq0BLjlqNTONAeX9xCpRHOZb3sT80ClaoGJLWYhEnpIgk2UyXAX\n1vOAyIGHd4iJfCyTwkrvPJ3UJh/Q4qAGspZoUoEO2Us8xx8SfQodiQQ0Z9Ev\nIUreXNfi1LmsGqoxAtg06wNsm5wDPiS52cxt0J6GdjjoXsKIYYzf1lR8v1fk\nJRbYFuXN68pnCMIxOXOxfXtuGiTclvAUprpQ/5FEwX/F14adrtyulsCnGjp5\n9KATTI9MBre/vkcIucQfhwdZuBs7SebacEMFIQnhzJxcUsqIlTFbEOd6gfeI\nD715FMmmdmFpKTxXF3wItgrggTADAIzP6rJ85f4Goq2hpIzOkPdiY4ASxewG\nwoDal8osDoZgFGWobwZphQkP2azGpo3U6Q5CpamgsL7asQPZRWaFLy5wSqwM\ncbJxsUps++scAJR0pd2P1LQgi0R0RZ+4Lpt97Kg1wmKk1bezu5iWaSDo7QAW\nmoVc53nBXpuL0GhihPFTA3fwHRluUKtlQSsTA8xzaTPnd+vXHibUD69WBv+e\nZJbfs0Cj7wXqFBnBleVzCJIXEH9LYsnFtA0wlQN/4Fgt6DA2vqDyHsots/WF\n5Sx/kgOGcVL+Gn8l8WKxJNsz50Hbdh5KKQp6hQqGRPWCBSMxFEk0k7Zu2t2r\n+P4M\r\n=DVK9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0fO0EfUdDYnnEkl2N0B9cMY6gvGvKlywVNOu9XyV2EwIhAMhruXyA5Jw8Im9QzdiDetbZvzUT2LetNpGgFRvekfns"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.02213ebe.0_1629480393781_0.640554087708451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.90a999b9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-ripple":"0.23.0-canary.90a999b9.0","@material/switch":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-psbViWEYv6oU+wG8SYKOVIltubIPCkrVMMxoEP2DH6dSwk9F6H0O71fRdyMJ1ZbxTaV5eZSYKxpmYtboRsQp6A==","shasum":"fec20347abc4f172498226b94f1508f315bf8512","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.90a999b9.0.tgz","fileCount":27,"unpackedSize":93654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/ewCRA9TVsSAnZWagAAoBoP/0XCGj6zmoNHqLQNJKNX\njYXlEr+q4yEGlHxYjiw2isZwzBn1jVwqqNN1l/YBYS9jOZrv6aPRBAXgRJGq\nzdnJ6Pfm8PSwdSY51sovtIjy2f5hI11ZS8NkzlnXsZd+sM6NM4P8zR1krZZA\ni2FRH3cKX/HosFiznlhcO2vdwDTpNHEMVJDB1NgzelJnFr/si5ZLZ84Pdb72\nlPC19ob6KBgD/hL8taCIdzb8JiQh2iNoFo2aIVNOVVC/BtzI1cGMCkHEHYAd\neYGOB6uXhdEy/1bNWF30F8DQOZ7n/v25AysRph8gJVdFg+afCUu5ScUu2hfL\nSbVfCF0q2Gey5HS0gsHMrQgzM+yCfzn7ijAS8Z/fIwDDhWh5z6XML4JM6DSy\ncjRrkf0DZwxaC0wJ6lyAvonMV7lUnXVcf2ddu6p5kGKtK/5rcdYHe/19Veh1\n6IeB4OGNoVrORy37hbwKL9WsWX5ZBnVc0NVfIJV63asjSMhoDn6tc0JcKhUU\nWvkyDKbUeo8SR3UrZ87Wpis66OOBMNBWKDoEtczCgriMMPt8icbIpMveIzi8\n/ggW4pbf34jbGZbFk1EjXk8Q7+YPI4ZX14QwOdorM0ShkAigsbzkcjMAlUPR\nVTLp+qfQcaMsvRLh1KbmNpf/Yah2RSI6xhrkC18f87lfc7ugyXYw/zW2oZtD\n8+9M\r\n=1D+i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDptb8qwsJVx9yhAXrnz4LgHN8XvPpWTy+Kbk2AjESSqwIhAPYKFLphSwf/YGfk/VsTI+5BQ7mxSlBwcZXjLVMqeIOH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.90a999b9.0_1629484976659_0.9175947556449637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.6db58716.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-ripple":"0.23.0-canary.6db58716.0","@material/switch":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yuk5gMiajfQ+j3otAyYHtZjcq0bIsZd0ZnpB9JFz5Sf4GMsUnPdeilVSdlzbTcU6ktMUZtvefMgH5mXk3e0cYA==","shasum":"0b1c565bcb8e1532744798ca7d216f4117431f50","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.6db58716.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WGCRA9TVsSAnZWagAA5l0P/id8TNrNKwW+MYbAU7Et\nv+kFvT88hRiXBZ/cxs3c7VJgONr2Ic4hnv0PnchLCVTVRhLZcgyDkNNUhC+w\njRCCWT9W1xgHpi+0HVCS0Qt5lzYLOqyzhDkN5CtV2lj6anjjOH0xOrnNUUa4\nqQsM53vTRwcQmW5z/V4xb6Z4+LlQxr03VERHXBU7tGBGal1vtpVxb8yL7MjJ\nIu27F0Ew7BLpILxpQhNm8ra+Sm6WuSIVWqALjMOuFjoAw5bi3dV7SdPi8R3p\nu1pjRKqKr+1yKPIspBsnydyhHcRQEagMVau/LRYn48Pu3gk4MhBWoqbPlKGB\nTiWrhggT0+hlSz49f1udRfI5XrfNFfrhWloUMtNPi0QmO4YS3Z0s2sDhFaTq\n1D4UePkmvnR6tJg88TwPhmR3oczqu6fQdLgy9icEEqo3v4aGV5/UTxH7yywY\njq3x97KEISHZ73Csy2L4/eWh321WTnxmwLkuwvFnx9irDwI3dwwWDZX4g5Qo\nqXTaS1wLhXADmGT5isTnjerca2Y+RfoVBSxSDfJgUa7yDNEOamfMoZ+aU0oh\nkoGGDdvRmv9XNxisZMlIPoKgDd+1UMqrRo+zLzbHXpZnJ+U4TuDGuGtLuv+K\nEvVVvJIgCLrjA7UeuzzTY+WYGcoiMMWzJmZ3+7pW0N3TW0peG/Bm9Iqf7a6A\nrWki\r\n=jf4Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG07H3VoNQZvUHMYYuZUd9uyQWXy9Pb6JZpImi8XnQvXAiEA/MQpm6F9g6Br4CGxVaPh3DUP1jCiOnZra2+lXXUSpW0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.6db58716.0_1629709701975_0.2746143253394633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","@material/switch":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jpLqZFw/dFtKcrvdjq5Xu4ndMOKEdjM2nwfFSDHthdr828rNM1orPn14YWzY/bqxDaZ29qmwLKaQIPlWBlfWwg==","shasum":"fee43fe6b1db64237bf24015b077c30515dbf9d4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.9fb5bc35.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCY9CRA9TVsSAnZWagAA84IP/29GUs2FKk0gH2g2qB0C\nRrxH9h1/t4/yggrrRYMiKXEP/sQwOAyfC69ChZ0AStz3evIY7UgWlPrMdDWA\nPdobR89yA3tC+qBS57nlK34uBegUh+C/bJO3lyXjL97jBSAwVoE8+azRjJNG\ngjuw8Nqh+mpRND/MY//GWvwfx2/R2aP49+iFM5n/RsuFAOIm0Ju6/ErdLivu\njnCyQckDpk5B5VFntRonM6VBVBECdYd9MIjCR23/uISHUQDKGuG4sVhRZob/\n6JLeXhf0NbkiXV5rUuM9uIO6Mz8EyeBm/MtOg5T+v//72TK6qNuBwMl9bGDT\ngzx2SMcPoQVB7+1X/D8g3zdq/17mRsK7Zt+/1ALWUSpcCSLlZ21N1YFgwkdM\nHiU5iTpiwm7Gwp35svxKDVXssvmUoAeS93ppgLHjiXGmgdGvUltZn9+dm7gx\nHI3sNw95sMZK8IZFv1mxuw6JoPoFrKuuZl9e2uzM1h4DL7sDp9g3zRnZfyW3\nMZuGKoKNnHN28Vp+5m5rX8viKbe34wU8M/htqhOcJRiOGYoWorCI9xd1Ano0\niddKGAd5Zp5n8C2Dy0sI1vPSJ/3R1QjJxd0rW30s9L47djDPoATIqHEs5bd8\nfno7+VDDtZPyeuHxUf+tzcleqflL6vfT/tc7Rp9hFL6TNq/c8p8cVa40eF5z\nwQBI\r\n=/VnI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB072XmeshEuUAAKWvbVm9T6T54HXdXXccrNT9+D19jdAiBamepelLrluEH/c+BKN8k7fxOBLi7kpQPLW4DG6Gy6WA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.9fb5bc35.0_1629759037272_0.7870209624805902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8LyZoDIk5NKRd3mLUkUJBpa1+D2gCLpUQXOqfQLBFtWZvCvLIaclFNTQJYm/woCDE6HbPeQglGCUSg7I4WKgnQ==","shasum":"2129bcf51fbe5a6869a10243bb1544a0c4fd69c2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9kCRA9TVsSAnZWagAAg60QAIIoaU171Lh2tadP3C+Y\ni+3HZdzMk1pk9S+Fw5HqAFVd4GCzoISHdGa6vc0J9YeX6qJt2BqWtZ1MDTSg\nT6MwBMmewZ1Y54cDSH0ipd1hfZhav4HxHweib2S+nC5EeRbOgY/sk9Ggi/6H\nZBe5gMzQVCYO8WLBPESbWyiLKp0rV9k+cmCoiDYYnCwM+z+fhf4HKx2lno5u\na6wOo+MmRnCR5t0TfNFVI1Pe6BfXNU1Wuv8FBlWLjEutMrW4S4Ka+svKUBMr\ndQaqoGUWvMVULojH2up0+qJIwGes6myyrDUDsYGc7c4gtKxElL1ptg7dJbKF\n1u2OoKgq6slYBwL+P/yaO/dRTgDkwlYNex5WXaG180kQxgeto4Jo5ah9TPDW\nHo9JsOIAqKqmuCj5rkpSEh0WCQhwYRV+q0o1uzf2ufWXq4jiy/U35QikAjV0\nBBioh5GCqJ+3QEsqNHBs5zVJVn3P+fHo2m+y10DfjEYXed5vkvvauSC/rMlt\nqDIJxJr+rFu6zbIWQR9JQniVN8oDo4dsJ87lFx2weNGrdBVHgUgxpwdGg8xM\nbZ1oAmIWJ76MXu2VqQ4zlOBtv1XBVxg6ooj807yeVRmltLAl0Irb1g/fP5PX\nCYonmSGylCyk5AMcei6r71hRYinzbtkMRlnKB1xNtxz4ndD75eaDYS16ZboK\nQYT1\r\n=8C2e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC06hiC70zT5zgvOP168LqXpVp5/FauFjEX+lxdG6EU+AiBfFisTPuaTt6kx/xNHI4CWrEUjmzc35DDSYTWzFJpsOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.ddaa5d8e.0_1629831012129_0.8112826997193514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.756208fb.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-ripple":"0.23.0-canary.756208fb.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5AqWRYxYAoev5vChmQxKdjwMSLPJCf40r57U35rOv8XI0XmYizNhQJ0ghmRcP5jpTSLKbRIR94pJdirs6rmgaw==","shasum":"e497821a55c123e1fee3aa673807dcc1d83bcc63","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.756208fb.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8iCRA9TVsSAnZWagAAy08P/AizzriJu8Kjnexnr1Cu\nh+b3XgcvxXqgwCOQl1p0D7bAcF9v1/A1Rl9cBSm2CWJqB2x/c+ApirqflQbr\nvSrf4mfgLqrP/vHjr4oStKuIOBeNQKFZvPDjAQol4zXp21iPtHJyItNaxlxv\nScudk1iCmPkhUCHYjMaLB2j6VblphrKSs5jkGZGn/wXYT4fjISp4TGuRqee0\nF8QEofafmGQCiR07GfiCUpiXvrm+dZNe0GN2cu4Q4cFpZNmcfWoHxKYwcaPR\neXRN1izr5hj8yz6X7hpHT8XOaxD7GTX+VhpMfyqVBuxQwYk46KjA8dFVg55u\n/8wd31ctXh0CBHHReLqupRG/B+2i5iWiGAvP8/5zFVLOJ21X3x6307fMZnTN\nw0eQQMUyLm90LmcITrMC8gnraSGZC/pq1FiESgvPgW7S6LIvLnGzGVmvkdyp\nAzjrYaHsFOgrgH3CBFxvkoQeKD0Ko/L2BsZPsY8hNRZ/Y628XYD+6bI+eRzp\nZREozxSLT7rAL7BPR4zTJp463AB1S1DpVrpqJHeFmB/8nr294EhAtStqT8s1\nxCtn5O2IKWtuYenj+JT2/81fnUJ5GnbB/NskPKoELZqzivN5AFFZfeDRmnY1\nvOuQjYaf0ddQlldi4nBRpEl7pPXzmKO8/JVNuYuJ6ccpFizgkDHECev5oi7c\nmM/W\r\n=oHvN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8SWYhQoNQpsSi06e0hqF67VSlJKXUOSI+LObnnpws9AiEAzF4rfqKYh8fJt2XeHZfYoCdr5K4Az2iweu8tBJXvcek="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.756208fb.0_1629921058163_0.34016921532417244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.9576dcd9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1APgR9RGmyk9XZyB7SK8cnMDWSMQkMvCvcOl9tmAysT8wg8ezhgeYtb4L5F8zZQrHE/6bGYTMs9Wj8hKQoYZEg==","shasum":"c2dada115e5929ce3b28c9cab2990f128e46a367","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.9576dcd9.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmxCRA9TVsSAnZWagAANkcP/2bVxAFxxzJuTuqLyx4e\nhDYyVymwzGaQS08jIIIiiokyXInfSG18CBMTJFcyPiERS/p7e7gHDGbsCjpn\nQOfzuN9PVIqjubNsreDpVSKgFQedG3IbBYL9QePARRQ8aBX7MibK/PNueNWK\nvuPl+922SI7NRAUf2JmduidWIvmjTM6GjydCM1G8c6AgLiBQ1JyXtNhN0Qsb\nn6iKYddu4zNelQxZwJfT5bCF8bgqiLaSO154fCFflEmX8I55ARH0mdEVIw71\nug+VCmLNe+qdRjWROK6kgIVLGhsjFCEgl8x6+/DgpyqleF110DssDx8lnLsF\nU9ZzGB7QQT3q09LMhAqb6Oy0HW5yfHRZlvGCgcO56O3+swtBhsxkwUUa6MA0\nbEjjVs9g+d04RO9XD2AVLaINQa/Lc8E8oPTaDXbfW4nsYvjUv0EwZZXP7cd2\nrHUepAEEGmhY2D4Alx4EloPc1FSeN5IlYHnBIADuZsjQCvOs6HGND4i4uZhc\n2+Q7vWAaHL+/003K9mZgzABzn7lBn5c43CQS/6JBYv4Jpk7fmu/f5QxoeFOL\nvrEfPdQ0giURN8xtkm1NENpHeBo2VH5GSf/JvHBXfURJfL2It0OeeBxC/GBe\nSySh9R7jne51/6cveuGw9e+rHyMcVts5IrWvTe2gRybDtuT7ty1J5N76kVl/\nrQOK\r\n=MyzX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8te/BJjFUMmTf6/IOyShF8vgsO6aHzpAypDmeWMfhRAIhAKwCfiJwYhXi9gt/nBjeI0gpAQdYcEz0jGzsAa2Vqsl9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.9576dcd9.0_1629927856934_0.23250585363819098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.7531cf97.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-ripple":"0.23.0-canary.7531cf97.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZLlMdIbEi00i7EQiNcD6gVHKFuBSFfCYKrNuUI8A7YwaxAWW7roHybmAJXBuBKNONpWpDNPxNo/GT25LuwfyZQ==","shasum":"8f627fe30a684c284b70c5827350a2d597dd4582","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.7531cf97.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87ICRA9TVsSAnZWagAAWlIP/AhPTrCyb4z73EAu6xVm\nnaafqffVUhFV9gw4PVqMdhQi2ZEQ/ihJg+nBeGx7u3FlO1wrneDmTZLbMvhY\nANHo8rpU+zsV4N3l1hjBaCog1lC4zrmBnWv761JjkRBAmadZsPzqENNFOfIe\nnClexc8GKfk8uKxCtnwPHNuXgo1tW3w/mTDs+8R8/EDCJy7I6WNUr9jBJYr5\nBKiB2Ao16RAoV6ea3+7sZ1wXljnWyaJ/cGUxtV1Num4zPA8tTS4adj/2VgL/\nPOqutiF6IgqCmiR3lbKOY0VJFyW/ATTv739k2keaGiGqQCcM9aVJhuXwex7w\nBC/h6sLfxJQ1FT1YximvTeN+99bdbtWdjaIl0OKbYvaogAWUN/WEUbLpOlfn\nvPKi8IWRisiCuuacfXi50u/EIKyoKJnz+uFrH2AO+CFCeyekUXDp9OYGEB2Q\nTbWLv+SBBMTsegrJ8L+mhrN1m6Qw+bHBgQCmoQWv+Ykroz02HRnILGk8fLLo\n764cmD5nNOon5ZMFn7/s5wUQ7TYJ6icL149PwDxyCwRsgpfLFWlQ1KLUvBP5\nRVv4s4Oz8W2jAkuX45nJ/QAhAOluy9FmTR9RmHHK3OQ4Erbncve906+MoQW2\n8PXs8mOp1D2yWFn7RYBuUtaHSo0+FrP5HQHikYgYbiwFnLLb5MtmNrw1dM7L\n52hx\r\n=Jzea\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRNFfd96KWEfmwN0el2Q1VffN4O+mZ3HBaSCh9ZFyb7wIhAIUYjrIq3LfXLtjPdFeY4Y8SNZ1K/zMSdfZoN6SLLBNf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.7531cf97.0_1629998792320_0.4818113623589637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.3bab26b4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B6pRYpblq9jw/U/sY+aqjFpS5poy9YTg+998Gz7ZIbC7IFMIZqYe1rCFhQY11wmDGa0xwslAI4D1OxQOTZG/cw==","shasum":"1f22ed7edeffffa85dde59a5fcac7d8feb688378","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.3bab26b4.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtnCRA9TVsSAnZWagAAA8MP/1ry2ZM90JnpdkCilOzQ\nxYzcFJn7WpCRb2AJic7ygZr5TNvz8Lhmgk2kiNc/JJxaWk5lNmYfuJfII2Ap\nSfa8AFi5Cj4EslSJAs9QHECP//1vaF3EeFCH1wxxqC4E1bYJ5uneT8WIAKmb\nDnqQBkxMennPf+SZTx/Ly37LQyKqtNHk+OULU862tra+Mav+0ftzFDxePfRr\nfP07OqlHvLQl891iMMkaAwYVAIfEGOmsKJV+LQsuxePrGSa/pX3nfDNLiDSC\nOu0r/veD2HsWL/q0O6hTQZlYywNg7WMqJnPCpX1XQKdobFFi25ZaoUKIgLmq\n/mFqJAuze9VZVqPEwlSt4soq2d0erGmkaWnpZFjtP9vWDiKITH6rLHLyqUdB\naKfWKUkC3tp4vY/J9tthIgWesBoZncp5xCsemZzCkHOGYpuGkuTbHDrGP6gw\nHkatYL6KQ+7mhpIyMoeTC6FlXFL/T65LBaHTzpHe6vuTGukUvz0qe+hmEuZA\n2/xesFafErZRF8oTrIcFp9fYahoWbQHMadpo9ARITE44sBNtjvuLMsj6HU3K\n/EAG9CSObRYsZ4/Ir4xMW5RSxES4wuDYNhWvd8+iLBtIwn9as59DLzCTGar7\ntXpRuGovHtSUzQKEO9sfBIpKCkPWI7gxxetyj+L0M2JOO4tmTVl5J5DzeqYL\n7K9m\r\n=K1ps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCftd3qWd2ZKPsiqNCvseKXGSgsPk60P5VxbVfcZKPsFgIhAJpYiMdPcXcn9yhkID1oYsVoHrgBo42BFgLU4R7cHh63"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.3bab26b4.0_1630014311566_0.866891102650706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.fab48bee.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-ripple":"0.23.0-canary.fab48bee.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zyRXPQsqFoQn41gYBnPWHq1rW0/BOqB52XZHo8fAl9PTRPqMsrmELMMX+vMrlIjas4Enbef1BYS9q1oqrJw+GQ==","shasum":"722658f7d12762cfe5317fa38b6112842d94792f","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.fab48bee.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDCCRA9TVsSAnZWagAAX+AP/0ItcDJ14UOyvZQ2NvOh\nu/8nDY35eRE26S5kBJSsUYWE5qJD79zLQKNytSszJdV7WKhGZfeJMpBWfVJ1\nDMl/EtmwCPQ6Lg8bmRDamrDSFA3wXgicvha5TxLa7y9X7klmCNbssdDJqRqc\n5HR3sm6jKvU3VZodca4aRWjKPkroIntqcgxQvtBoocUPOr+Qa2KEhHznDNwf\nyxckciD0S1J76WG0Lm+PVP8DdDZy3Uw3AvdGy1K2FNrUGmU7s+Zzh/t56GyY\nlrFAlurX0ma+BavXSZegn3t6gE6wY7ZYMYbEjN0rIVJzFcggoondUUqdxSu0\n4J8hO+T+gE/3G0JVvG9HZvL76XMS3aA8zPw/t2a4oUf5NXCDP/uQcbs5B6uO\naYArwehzV8P83NZDyv8sKcpzWQ45n7d810QTzTzJpAavpgjJndal0Y9dLCWf\nKxoaOUskpW5HkKa0MEqr7a92m6Z+SkNBP1fAkjdeZrl2tJSyngJbXMtmUcWR\nt17dM/ib5OrF6PX+LFbmHXJEDjvzeX7VFzc+XiwhpBhlCb6J8mOuH1fApuQA\ngGJbR2FyJe2So7tdBbLxr09Cl5JsGM/bgW9WuMbjDzO09K5lcE77nwm6MMUV\n5Ae9FlPJinYJDcdKjdX+4brds5f4cH2vWNQk8rTQs2/KjPxNQXZL0PNFjMXN\nYASr\r\n=gAUv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDl5rHcNoaQJ3MGjR9myB6hzD/vdUKTMjIzdggRm643FwIhANgdOJcFTJzpOBxlzY+NOHBOspIe3sYSTHJnknHN/VTR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.fab48bee.0_1630015682130_0.9725961128673604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.dec18df7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-ripple":"0.23.0-canary.dec18df7.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AXzFPmaG99Kq3u3oGfYxw6wIZV20d8BVzDwOPtqdwrFIAq2e8wIEaXBg5ntt3s7Bu37coOSDM7zRkP0Z/b1F6A==","shasum":"e6c74f78ed8bff7a755ab43e9b06cb79e931060e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.dec18df7.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbeCRA9TVsSAnZWagAAS4EP/A5JI20TvAny0qFntPOs\nD6w8cQi7sPne5RRvl2DwcP5v0cbXuhNcDMhn2V6YDVlm7fq0QrXlNUrffnKx\nxddXxrLdpah7ZcQ8C8PpvetA6Ku3sGJgPk1fhdBrJUoizU15Vc7Vw1dHxB5s\npp0QCdWAfWq8/6V8TgJQTCZrYUGMrA22mTRnPcH3Z82Jksd6oTC85k+zXNpT\nleyUJ2OANqiObygbufEGHEm9mtL6Pp0D+K6BFyVmayO2T0SShylYrmhbs4K/\n+rpwBwfthDEghtuD+bF8yRno7rOKoFUOBkqAxelV5RrqAm0XMkdTCBxoed3A\nnEfiXUcbuFuvBE+bM7N5nzGe6VqXiBFTi+RaxMAueSBOIaS9wm41Tw3FnARX\nCfg/jbWv60hw4CGAZmEry6QrV3vXjBGeE2t4t373AjaVOCVCEplW8a3dmmqL\nf5FsM5ZNb9pNVVny4Z3ZR86Snd5q03oKfTRERS6mTE0AcNv+FvnmJlkU/pXO\nqjX6yz+UikI3Ap3Vif0fl7byQ2ko+ax1rBdJOEskA6jt1fPYEbw65nSWMgNV\nHnTM3F1QghHybBKnukZ2PdY4KPiyaaTZ45Wk1FB1pVQUwmo7/cytW+ExjOj4\nLZf1Er36VnRlkfaPDw3SWF8UH1Lt4fGh4Ll3K60s+LBBEXGtcHlhD/NVWrL9\nFlhz\r\n=I6B6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWEHqLX0eGhkMqjeRKKlKPm6BqKiGLa4+UvnQUNJ5sTAiBZTiMM+TaPR1rx80ADaCVTSPF7C8hiFLof8a+Kxt0UcQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.dec18df7.0_1630312158734_0.5783946222375504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.61fe5b17.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8fCa0RsXadhf1w8bIDyjhVpN/AhHbz8vgzsTZVdAXr4PSmi7AaOUFp5vMJ/IPeeon/veNDg+6avKeMzw0IUTWA==","shasum":"2d5f0131b413979349b6163fce76720b7383d990","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.61fe5b17.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGACRA9TVsSAnZWagAApVwP/2b0s6yc+rDZD3GRqFrJ\n5dDwPnnGOBWHDkFcbop4zv/zyED08i0pFF6t4Mtq3Iy6wGvwZOtDzFNMSzh9\ndn+KANRICWVj5RVU9KTr+EK97M+VVPpyWBEGTrTHcwD+VPj1FVyeU2fiJPjb\n++6ZrqoCNoBuy081zjdUrgcLp9PQNd2VYtGrFv9hL+NNwl+x8HR5dE99rr5U\n3gndyn5V26JUcgxD9cudKCrsYareQoNje9zJhu8PKm+aaJ0a8Ad2VHFAq+Wc\nXVv+ML1Pu46DTiut7RUzPfi//fzTuu1MJgy77HR0s562A+lUMWI97ZGMmFSg\n7HO4nBJdZG7Xs3+D96rDu5VQZj6Ld5BxFj0B4UHe0lZ/hLGKO2r0ytgmEmQD\nk0ZgYBvfbv7A1Ofbtdz8OBYkdKg38Q8mFaMocWEb01G8x20PLaEJ8bgjWjeP\noLo0ZqH/FpB9rl0FPd7Ak3daazWfcul7+R/iGGz/OiI0kbR/sZ82IpEg8fTk\nwC0NOWM3VzbWTrHsXX8nXpfYTgDr+VX3GGqViBEEomNLWmfYbfk5CzYde06K\nF01aACqYVFC036hGXX0hO85wrqSUDDADMeX5JQN9yPPvo1QQ+ctVHnmDoTTl\nZsb8r8x+VZlQAueHvxJpbf4HV40BiC9E5HlRcRwLXbNzwEskF0W0DHOtSnbS\nHp16\r\n=FeQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeMCAR0nFeBI28FAHd5NMhE8PF5yLHZf3y6g0Hg/dyKAIhAJQL6tP6h1vBukym5ysAZF/o4vaFgBTbx1auUcHlOobd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.61fe5b17.0_1630351744311_0.40801618369479975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.a8c31f54.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sUMPpOh9XnB9L09kj2NxTsFH5vAZMwdjWctiUddVtCpzRFyPWv+UqWbZLgLa5xsWLngJeyVMnprpYCpc7yA0dg==","shasum":"291f31031b4ad9a7c4b62d8927f15fd1ff180fc8","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.a8c31f54.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUA3CRA9TVsSAnZWagAAKX4P/irOCUsia7xYKQa9QwOD\n6ftdq/yXMk/BsJTAMJ94ukwLwt0UFXzDuth4HKFtJXOHxjum6ENtYaWSYW5M\ntzqkdE5XW6WT1O9/QnfqrA/XSXDPffR3w5zH2OHZ0sGpsLL6z7Nhz2wDan+B\n15jo2H7rrVnLJkAaSpNuF/eFgIm3PgnQ2AddnmpxnMXs5k7ETmIYmpxOwjjg\nfhJz/O7WNK5rZXJOK6cp7+mkn3XE5HFrPmV0kmXCFKZ+hTqsaLJYFthcSl5p\npvf67bhY9EMdkhkAmoPx6tJWznatjlS2gaH1AQiMDD8B/SuYxJc49YZmK5li\n+hsyJnr6PmLdbaUbxx8MWJQPHf1CF2NFhRXY/P2DgPfmXmdCp4J5kd0QtPxQ\nC64v11pcRR1Aefr8Dxz5mDQIcVHjieUB/pZOxmLwMTqh5iCqvMTG2EETd3uU\nh2Y/e/+bqdvCpnrMn032mclK7Pa3725htAf5UydqxtJXgP6byre6VmHZw7D/\nUl3iIwTTRyFikhsZVVmsahLa2N5QMbWN5MfHJZhArKUlyDUpsoBK1CvHhZnV\n+tTfIdaLrbACiEhLlLME5C013FcTrEIyBIlNO4bwi6qAuSPwkx6yUBG+jjMH\nizmsnbf8VeM1226akUnDoNhVzBlExtHqw3iZp/iaZv+HDK0iCeSGACdTxqnM\njdZy\r\n=l7W/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCv/O+qo7ckrlrhR63/itXdWH0aScEET/H1zLiO1tqKdAIhANItibprCB0jJeMy8KN5lNrE2tE/3o+qlSDo2204MSIu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.a8c31f54.0_1630355511577_0.7170356975611332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.a096dba8.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-ripple":"0.23.0-canary.a096dba8.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vr2w3hLs0YLjfucKdnBhxo//tSMUly0YOYcrupelEPOAiuKqzsSJmJcvKrgyPWIuGmUiA9uBjv1JOwTUSWzjqg==","shasum":"1f71294143b6843b687dba38c0fa84b25fb1bc54","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.a096dba8.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrmCRA9TVsSAnZWagAAqIUP/1g3Nmu/aLhFocU5I54L\nkrSvQhAeTANuIaVcCwJx3LHUT81VTG3EFZhShV+FfYqrDAMYnLAu3IK/21k3\nS51CxtUa+Is19e4FbpftHsKZWj7OACzImzAuBWqou9Kci+N+LdsCfDLwK1YY\n1z7DErjyUP31b+gVT4j8De2a4bZpUZcLDdgQ1iTw2sPAG4FTFAFZIOgT79oV\n8U7mGVZryQL1liZnh/jLJQsYYYttWhyKHRxdOnd9bKhG7ye2LFr2Zg+QF65q\n0L6Bd1XrHVc/FHYLS2nc23VsoBI38CGBibPgYSXWt7UD94gJgCYogKQ9JMjQ\npYQCxova+QVX2zrFGPAo/Egyx7kJEoaIBr/Zez+pc+qVIu17hu/N4rW1+Ir9\nzHGIMY/9DjXsNHJ6IifhhmRVPdQWVGhLnAvuAJduAO5/a9zcIbPo4tF56TBU\nofRGPIBUQr6erQ3yB9+8ob59toogmP5tA0F/Tbs5BnoAkP5bWWpMwM9Gxnbf\nyttAXteaRsohvxnkVpVJRbD1f7hfhvNgUyYLlD/zk47ZqO3Z/MPpQSt0lWZi\nQMoWV5yYxwcuur/kCVpUEmJRe00A73yzNi2Il81r895yr2g24Bi9q1NMo0AG\nPuorFlc9M6qSWR/b6eNSBRJ9/l9RIbPisp4syeF0P//cg4AbJSC0XdRZtUgQ\nq6Z8\r\n=Y6iC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFKCA2+6vRjQujUGLVWz7WkXhL5MHgBYoalshavgYxJwIhANfHFrcTgZQ6Dug8ZAYtGdwp975tiQlQJw5E7vi9ZqCb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.a096dba8.0_1630448357890_0.2425090091229647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.7ec04d47.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OseSVIWyZjsjOyGIK7NrN5bz3uCN6XNJfMBoNtuBsjndLVysfiLDYqg/X6+35KSp7IjOYpJgm2OFLacSP015Bg==","shasum":"c75b19eb4b47038480668bf4d907f957c36a051d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.7ec04d47.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV18CRA9TVsSAnZWagAATEYP/1Eqgo21qs2qzWrX0dC7\nlsAUbxZlBcy6pqD9aXABeB1pebOruzV1gO6B/Y6DNDydCQNbonQe1oov18SM\nffTj0DWlrBMXpZ2obZ3JUwEYZtpvW2no0uYzlGBynogS99I/6+r5/0ufyXaP\nudKdFX1QPy7zyNS6eVjgpvMJyNqIaFgl8cvLoNHGcbIM35pzWxR0YlZJD24o\nFefhn2Q4FwAZFKD/tmtwMxWsTUdp3JCYfExbW4y6Jj5tLk1aD8nn215VZKye\nBUqt2kIg37mfxoEmaRq/Ic4oejz476BUwMKH4ssteoTUzcs89PxKe/pPR4TQ\nklRBHdmAphZS4iwP3NgJ//UJdUHvKZK7WhfAo5cQf92DpbqmJd778jgJFNDL\nosidTv4PXClaY/kdDmE1WF3RwSDmgo7NILUQvqG9KX/lLAY+VAfYRrZ7wQzG\nVFf+KojvNEr7sSzTC/qVrQ9/ViQaz4JWQrdgtjS54u7k5V89aH0SraOW7RQk\nwGokhjLAQe2AIKLoigM1PifIMqrAVkXSNq37ncgvI3zugtNDfP3x7ufqsdGa\nnJ5zihad77Rff38s7lLycgrdV0NE242JOSHSfgn42VFp5eXJ23hmV0qmtKbV\nY8199rgJ828n5CGPSHrbMrQWem9u7oS7zGt0OSHTTtMljbgJDFp65uOQeWHG\ncuZQ\r\n=nk7E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6+ZDookqhtq+sok2zGWJyONOnGWJWwMq79XaDyZ7KaAiB/0CG+QKiGTHgFTL9mtB5yaivkaZxPSS2Z9me8BEcaxw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.7ec04d47.0_1630625148230_0.9310589983292161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.d00b098d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-ripple":"0.23.0-canary.d00b098d.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YChtzTAJ1LZmE7gulFmjJvBpKw6yz8HUpJcjy6pPO8+ESIuQxLnUS8xxN9A1m8OKqbLPG4FFoCWVlAeYx4uxUQ==","shasum":"6b835a6c26e1fc849f867e77eb7059d39382b56d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.d00b098d.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMkCRA9TVsSAnZWagAAK3sP/3VVYloRZXPEgDgAZYm+\nj/CaNI6uQOHltTjDPDtLGJ7h7OQCuwRKjm+G/Tb8DlHhqmxh8b2420cNCyOk\nATVtJeyXnNWd2cL9Gdy2fmQCInGg9ZwNzEou3B417dvmqiibLXMLgs9p7+uM\n8LZ55z0ZT1D2K/zdZxncC3RiXNMOCsD9HRtkVSwmRdVFu2UhKUeDQ/esVJ4O\nO90iryErNdVFPrKW6EgJ34taBBFnzbVmkgWcOmPoATnUY2T5QhxpqNEqpx3y\nbReKPMHWd23o75SHskld7Jv7w+X/QwOzPgBBjQTv4w+JrFHTptk4iYVVKdD8\nXlhwOwMnU1mQDDTCvHm0z/SFo/wASEMdr9YkOJwOMmgIiqnzs/Sql76/UWF8\nIAlNEYsY8j+gI4f6/qRB4Bguw9Mom30JmuznvNmYNQbqqzme5NhEjfsiG/YD\nHwt5SLFoKHES3EYFwUsMMcaWtQ2a5+8uXZMnPQtRmZ+PUZnVrRclUh5FCiJ5\ngj2stU3XmkaYA/P9ZMg+4cedM7rz5SMYGzUwKAGgziFV2DLTGPEUTLi+em3S\n1dDVB9Nzr0XV56IRJ0jGBRdma8rSZwaqw3TyYKEzYjKrPAcCjCc0K94T+8IT\nhU9U8C4y3qSsu7dvL/6NB6EbctUc9JvK8GMxN5qL0SXRWtOQMHEMbEGiImTn\nUUXr\r\n=Dt56\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB7kXRwB+Ev/YvCYxVnB6uldgs0d2yezoMPVS0N+Yo7WAiEAvij6zVNsUwEZh7mWiiT2Kmj2X0HMbKm4WAxQvBIUVXo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.d00b098d.0_1630704420573_0.5852136935167824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.f29b3352.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-ripple":"0.23.0-canary.f29b3352.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9V7El/adP/1ppM5Pg2S8Bq2dAAjYy/LSLNJM0/hVPlUHgAUnwQiyDI0gWXXG3Ggm8ka3P5R/YqZHGHA+UrSwzA==","shasum":"7d9c8256ae3c52f1c588c7a96ff590ea880d42f0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.f29b3352.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6x9CRA9TVsSAnZWagAAqqYP/3AaDp0Hh/KK80DQIXrF\nVQ3oLjTSDxiT9QcIPFd55Jzl9WzOEN98eNyV67QBsIDq0bEPMMeMwfJgcYf4\nMP2FsJr0gQvHI2M+M7E2yMShlV+HYno25++1g+YML26TBXbPrnKZCvN/P1Fc\nXzNqGyNxE3/5oqprIpaLl79dV9t63oqZW5DfXIOFX9vBaQ3qySndlBojG6A0\n8XCzNqTyoDfBpmLf7OvBfkGTyUSLKuOB1N7pCJ7Ztybxs5iD3IXhKJDa7lMi\nw9MmnbMN3d8CeYmuSCxfZIwY36aIIbly+FfNhwx+awOEAMTUfoD3DuUBNsr8\ndz7lQPM5ggJ4aP6gLaHhxmgclXMt72FHdRtZxCygkKxZWuW1jHOUKQIBHPqm\n+1g3R6s68waXUKELVHAv3M2lGaLhJFnyzTHE1HI8nQZx/3BqDLp9+nwLJOAt\nfEQ5TlKpQBL2OaCoL0e/eeTihrqctPuTL0Vv+fS9F15shLiOSMLJ5pxoUweJ\npXcyjn/H+JAwLy98gdTtEzd0MraDZGWAhvToa35YpunGzqJKJnxtvIclwUni\n4w+l1KxgDHAq5r993ZnOaQ0/tHDxgVZI0BZMxuXzK8qgsExyEWj+KMaeqwzi\nrjwd3Sh4nwJGJnVS3VK4ooW0re2gh1ue4pJnd3Plx5ytqTIT+Vn8GFIKL/b8\nm847\r\n=hNXq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcAwERGL1nR11l7gwNom3j36egR3gKgbF1Lt8rTYyEdQIhAJrRWS/6eRcdxHB1mQv6VDZb/OaOfRRO1eAerm9juNMr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.f29b3352.0_1631038588960_0.14369195232386267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.4962a163.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-ripple":"0.23.0-canary.4962a163.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4p1IsD1GdDpZ2ctBzAjAYK8Bkh4gY7xsNXw0B585gnmVJM2OLmBxWPGmruvkSExdSVEFVaAZUn2TMvgiPYXmvQ==","shasum":"1636a47b9405d745af0496c5030157f25672c679","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.4962a163.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uFCRA9TVsSAnZWagAA7RUP/3mByJzhfq479qPOKkh6\nfYVQ2QeIHV58tyJsow3gP7es/M1CAn7sz6qEnUr7CI3RYmjTg1ZyTz/2GzXz\nlE5O9DKBaHYEubUoIT2/Np8CBqKSELwEELT55V1xVRAfn7vWods4AbGNB4CN\nuOyjzgFVRH6NTgCa3lmQZCyRKCqeS5pv6YNOZPQgGKPiU4UA3PIxvPj2WkzK\nZOFT3oCSfCSa2LMUDNY3ust6ZBqzADTVXH5cLBFHLUEAtRAsYODhTOYK+nJG\nZOZZRsEXHQA2vuhgZ49zIRVop60AZ/vhCiZsejhwfELwT14KhAz/xtBz9ZwP\ne972pExVMG4j9GxRx7PuOnNaZ2vXYRn+3dxFBV1aeCJrsdp68EETrr1EMVwt\nMPBO/BDa1kZ1v3bKHQo+3x/6Bj9fBQdoEkLiTBS8xVK4YnK1n8El9ZqVtLAK\nRyExlKsOnhwiH0uIHAOROCg8VqOLiDgpjWTtzaaP3ppBXBiMvPH7rY6UO4mN\ndS25aDKq/3q2L9Z6wEAGDEwa4VRr8tUdYZ6v3tZpzgwApb/jf1FM2yMh6Y/n\nMJwkYxERCRFWAUT+V3vQytYnw8ZBnAlP5D1mWDS6yD/oDHPowGjHpb1f6z5S\nD+AhGs5s7ZSFPr43MPXAyqTHMRWoLLoZii4oXq3OiVooAMi5a8Ca6ILv1bmx\nuz8j\r\n=u8aF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtjGVku3058+tZa3g8CQtrpDbfeKpx9edWNgPW8gyU+AiEA/ILErnTpa1NvcAe2dU+1xmnCZnv56lxGtjFkwwJ/jZw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.4962a163.0_1631058820653_0.07511387971523265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.33102bf4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-ripple":"0.23.0-canary.33102bf4.0","@material/switch":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w1edAPwQKdgw35+qpy9Yi19KTHClNUXRTlhKScmqntreIcOVS+RRB58w83S6d0wrKynM494iNkfJwLo+vfPW0Q==","shasum":"35993c2e26b749ea36fa2e0d57d53d965b68a7d4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.33102bf4.0.tgz","fileCount":27,"unpackedSize":93752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABCCRA9TVsSAnZWagAAXGAP/3kp/NACy+B9Cgsvjdhv\nivMw/kHTD2wEazy+j3ADPOCX8H10CUEKTH4T+4EgVr2aHOQuD4+1vfUsD5yQ\napzC89icvsif/VDwHqmICCbfDPUkVU0opAo0HpmbY86c5KDPuYNYWkDLpeT7\nMy2E+oXrABGpdCxv81KkUAHKOqdyFOKfXTSv+mDiTOYDm7eLwr2TZgjzICr0\n6CEGhOAxz/G5D/mWLRAL52vwqfmFg4aa1PgE8nKd2WXILFzvbLOEKkRZhOmN\nPn8LkjUKtV3IHqEdY/PdKC25smXidCUKDNO98GM+3XfPINzvm7qFVJtD32ZU\nQFTJx3QX1Mk8mHxT8dGUII7/XtdvDS4psEm9pkpJe+u4hBiMTOMsISPtNH3r\nKnRiGu2dYwB//t9aNY7bucwPjctByCMN61EH29SLc2b5BcpQHlxMebCCC8+Q\n+WY/9waBE7EWHrqYoUyZPGlKO7Q2yLWwXvkEBl8Pyy43WDIsfOMV3t3xFmaK\nzqhaTWPEdH4RfcTKwQ7dj27qKiUv3tlAkT/hi+qFEUSLaMgOsqmRyG1xbxdw\nC1NbdgVxydvZmvSQYYJYDcM3+z0CwiiWREsTmOFkTsPTaLZ0dN/mU39uYar1\nQlMlsxEKYRA3s48YgdxdAV6Q8uVsYXD6Fof75eMEsHRCU3DUCE2/aAsyL7oZ\nYT3H\r\n=CfdY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8qh5XA+tD83VZDEEeciTWJ1qdJ2slSz70PLYM6TrqNAiBwbrHhQlE9c2D2AIz7AndIORJGcg29lfLZSM5e8XCsJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.33102bf4.0_1631060034532_0.5608851418710863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.76c68381.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-ripple":"0.23.0-canary.76c68381.0","@material/switch":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HmditBn7SUmXK6FKZ7CC2K843KwL4K50Ae/zRngMMDRU6PL5kh5jTH5o5jHo3I/GaTshLXDYE1d5/2Y/YM24Rw==","shasum":"9263c54706be95896d148c85f317352e6d8ced91","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.76c68381.0.tgz","fileCount":27,"unpackedSize":94422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmNCRA9TVsSAnZWagAA4d0QAJVKRLCAS4L+ZvtoQo98\ncArgmp+ErST91HrOzHEiGEjWkoVoPbVHCfRSAe7pZ1vtauaH5O95P2rVmI1j\nm0DhhP6j+r91ldlm4k/7aDeL2sd18B2IZZEScIYS9bACn2l/COkjP9BHNPxe\nq38oEVDdkkMQ4SVNj1w3uhEAvtvf6C05dQBSDAqJDRAh4dwXau5lUVkapLon\naHl19MGC8xVBbEr3QIA1c91yaG/FwXm916lrRC0i3w8Kpwynz7S1/uHyzCri\n76GEWXPT5/hNaOGG11RjQT0r3y5cNfVrm0yEX5xb8rSzspmyLmB76VACHmsI\nP5IbSb9Rr7J2oES9T42N00d2IFSp03bv88oYHBgWS67pX/WXF0A/1Z+HSakW\nqysiUCi5Yfa41C2sm6ONC4H/RIelTbOtJc+v8s1JBX9lFYKsyBYR8o86LrC0\nHnbzP0wbk1TTfVnqlIVuoU/4c1ibv2BUvR3nIQYiwjK38qOGq7lYmeYWl5Jk\nwGYTS5cUVlLf7qkHDpxFcq7u6MMaP0mCGgMzFcqX8wsIsAUXh+YnDbr6n1c+\nObIlnX93H3vqLp4nM/ruxXibNO+bJ75zCyrlEhyDmxRQQj3JZncRzRFjmK4H\nIScoxZJxOf28DUDXGUEFt0MuBNQnN8u3SN97lopihactbeEve4EyxSQS75ip\nQFz2\r\n=G4W2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCynswvlEhNsa/Qo2Asaqy3waYMA09pvwVemZmR2UWrZwIgHKlPQMM2xL7i4R1HPVZANy0iMuJQbt0lFpuNCmc+rZw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.76c68381.0_1631132045218_0.02281935394957424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.17d51f76.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-ripple":"0.23.0-canary.17d51f76.0","@material/switch":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OibIGnrvU0MqDLryBlsv85CJ93c0J/cfZWnz00fvtecO5IN+7JTw/+SS+zmr1epdkCCjjTWNMx93OJ9NjTM/7w==","shasum":"8958972b3e689d8ecfb9571cc902a00aacbf6477","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.17d51f76.0.tgz","fileCount":27,"unpackedSize":94420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUavCRA9TVsSAnZWagAAuTQQAI0rlvo19lYn8Nuoqbjt\nV7MESRp1ZmCcYHxllNzFXjJZQq4LWFta+c81mwPNDXptSlwO5vhW7SC7gsG8\nEwPGGQwG2htj4h928cROVvN6M941SRrqGP96SDCVJJs8RtkgK9OpWP+Ye48t\nDNSTWV5ye8HrQ4pZbD0V1dls63zoltRbojPY4Mzjcf6Vp2reCQRrdJgBeHLz\nt2/T5N4ZRpoy7OuK8FyUxEWehuwtCyUd9JJa70QUzLfmiusvKVt8lReVJiy4\nQJL9lUSVwj99XL40s7wKqvreGpmptZ8yd2rhqOW2/zR5o/UTb7VYqGPUuHPV\nidlntAob/URXqi7SakyOK+o7jxnkSmg57mRw4Z9INHayNDGfL694mMWEYEtV\naOs46UY3Y6SxtlZPmDJqePgfkVdwegnuXZEvyxLBRadLwFLSaBRzeHp2kgXY\nus39+0lNLbJm66cHrY/RXvxRsu3pKREq1Z/BZ/5nrQ3JT3N+I+RXy1xe2HoL\napszstIlcGkAzezBF0Zoynvh9UaYspCYFn6yKVctQoL1HtEKFhNee3cW42Ra\nGQKAJ2u4l4qY05EXpJfXDNQ6gQgPZsVsxOGr2DDDcMrz05anKpFmg7TZ09fu\nQIjUK1SWegf+/HMv2QsmsE9528+7motnlQlM/E3iMxhdmFd/sGb8lZeP1npR\nGzjs\r\n=y34s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7H7TJMspwfvQXjh+np8WMP0DAJuNhtvwO/+y2Wq+qtAiEA2guvWTnrJGWtQXh4kVwpgp7/RBKmrhkPW+0OsFS04Ag="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.17d51f76.0_1631143598858_0.2277377815470294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","@material/switch":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e54MbxYInUA6zKPmLFbkmjO0SIDlqkgIubgHF/N4y0k7F9hqJLJwK7ny9Z5rp9euTHsosaqFM9IYanEYEcPWjQ==","shasum":"3935a12c2f8dc3be1f6e4f4d89a6af3b247a78af","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.3fae6c2d.0.tgz","fileCount":27,"unpackedSize":94420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TsCRA9TVsSAnZWagAAQKwP/jt4Su9lJRZxlLHIYjhe\nHOM8CX0/Knd63M2cgi3UPxi7oueznJQtjBr5wau67na6gkUXCc25NN2cNW39\nS6eU5fqLKfG5IT1smCYOSvFus9ll9rR+Qfx2R1j6TxMXF5CrmfEhRwdlN1AE\nl4eOJULYNop7Ylo6B1DD2Kn9iym6EBVOV+R+mL3JPJ5M4JvsJTg20xT6tne4\nJrUzavQzymirbE/qCroHzqUSJGERT+9lLCYGjLhfwbYAm+qWus4psP6AYx3U\nUts7hI2VToR5Rj9O/ZwiB6Nkqj2lDOp3JdvLmGCRCL/Uyz71SqSamgt6YTAM\nnkCuxJBVGUE5H+Dw5cGAl4Or+gWnnOCsYhAsJdwTL4rHzr/0NBpXsFnbhUlc\nPw2YBBPBc8IBW9Q1PkJWlPTiuW3rAR+edtdaSnw9HsH30/5ZamJPgxig+5g7\nMpVscfFTqPpOgnnMTLgIMBZFOdQkC8uuRVRAeoqaqkyGZiYNZSCUJhHWJWDE\nF4Mc8ZColXPA44KZuzsOPb0VRG4CQ9crlgeY85mMELvFp+Irf7b+j+2QABkz\nSxXVpwgjALX4txaYFMYXmyEreOc3Qg+4Q6OVvKLHJtZjU8dmE/6h590nEBKi\nQURa+Xwwi1CPa1LFB1Hj1dZVuBwPFRyMdA9F+x/r89IPN828ntd1WR5x3Y4h\nUp75\r\n=ap7r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACOTfxnSbt13m3UOI/JHJq7tW5ODf3d5sUK9Mp08huhAiARBX6NaJq+K4PRMwo5INfZ9pP7w6/ULHMjSIMFUncWtg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.3fae6c2d.0_1631298796466_0.26677147437394755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.f1958c4b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","@material/switch":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I0l+SrJk2YDpektXLx0YIrtHoLup+mxY3YtlkcpOZW3Fb1W4NmqH2SRhFmUbVqEZhLQZXnFOviQmk5nOxfWgGA==","shasum":"3338b49f324f7a52d8d32d90d54a335b100ccb4b","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.f1958c4b.0.tgz","fileCount":27,"unpackedSize":94420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SdCRA9TVsSAnZWagAAEh4P+QDUhabWj9H0AYQ/9ofG\n7kCN5RCUSeqqIC+Q6JpLdi3hjlsyOa3bEfh/5gfTL1HqfVrBV6HU1cS78dLf\n9OPJvXPRHf0Zf7SzM8e3gNIjYEpWdqr9m2NJzoQJgz6AbAkwdxMeRZ5FTUz1\nEcX8dqSrT82g7NdOIygRnxlxE+BVUxeK+V+GX9SKI9dJS3rGYTfzG4DRV8KI\nMWZ3KjE3IbrMdK/j+YCxQwJqjP1kC8yWLKDyAhIgQPlB1n7i+mzlLHkGQH/P\nTw/GmLDHHe3BEJYnQyzoBuFYZrxljvEzHFuZBTYCPNxQwE6mH5ahy2p05AKP\n6PSZjkehn5BrJz1HlKrsiGX8kY5KAbDIMB2nlJP2bW6J24ajwkNsuK6sw+fJ\nlb3fdtR2vJ7pjN58T+LvZv7SvW6D3KY3FMgYCrGpLHYka9l8hy7rucdfsBPJ\nJLeXmYGGO28RxMH8Ot+vlE5wyWPTyqnxKdQw3nyngx22SAAeR1BnKVGHSkht\n59aTZrTz0SjvgnIfW4DO8KDD8sI8Tonx3gCLDW94XcO8TFdHmYWu0/ylo4tW\n2pBhLBl9OSuRUjb4dsM9WJ9d1sANHaA8zsn3SVR7rcrasRndkLuEAB4xK0Sw\neztLLEFBpKqT+MTwdwabMqirGnkGh8V3ZDOCrYaoN47pftWI/lkWdZAfWVjS\ndFtu\r\n=NIcK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF5PhCjilA6yMLZPJlBRwxXt8HK0ZAu5+IPc0O0SanrAIgZ/Q8cBu6Z2dVCCBLi2dQRCpXeZPqTVXYAQcC2tOH2I8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.f1958c4b.0_1631560861670_0.2648601157795005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-switch","version":"0.23.0-canary.78abbd59.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-ripple":"0.23.0-canary.78abbd59.0","@material/switch":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-whBnAatYDhYS/fw9Y406qSy7fROFX0Xyv2sk5IddFi82B9gPXWYj0plOqrjnTzPDw+SAUP2bBaa2creBrT95dA==","shasum":"33b2698070247f2ad1c3d7804b6f543e2911143d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0-canary.78abbd59.0.tgz","fileCount":27,"unpackedSize":94420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IQCRA9TVsSAnZWagAAd8wP/1ANjQzf8OGjYyU+PUMd\n/YUcA0cJ8dw2SC2wl6Vfa9h0Mg5UySUJTkxH22yjAZu4Qg7bC5nwFkELLleE\npX4RJ1etcSum5QaDsJIefa6PiLGtEUhgUWh4jOxE5dfyF8QaXcRNZKpWaMdj\nq0rAWuCtwyuU3AfSJjE5L7yqM2J8bFLPjLYDlbhrHHiBRin0vHaJnZBS2lpk\nMyfjv04Zp0TsC/zyD1p79jqXATdEp2PZyEi13kqPwk2ZrUQ5QmuEv5bZQKr9\n41LEEt5vpKw0DpDxipj9lHjmq4Eb0cstb0q+0s3foJrwpPl98M6LgLVbtw6x\nTNeZXhV3DkaJu6hlmM05Pe7Iel60KdET/41Xcm9/+fD9VFMuk7UVNF/2DDmn\nZYrWCzXNd/78eY32JuP4HkX0SELrUudu2VXFWLj9Iix9upV5rx8x/invT+yv\nCQGPa4DTrn2LzNHwvcp1s8xY+QjFvBwG+A6RQ9sSzbcPbMR6nwOhkHfh75/t\n8uSIPU3L3dB9NTjeLmvVnoc8Q7/yDb54VRFzOTieHYli5fyAuFBvl5U5lBHW\nMfmsXU3kzOktIyhS6UnMQ//MnLY8yxKYqL2pt4/cWnbG5/823fiJVYj1XaPQ\n6ZO3ZSRUQ+v9+UdBmey822vJ4TFHJ/KiE0oI/Qkr4M9gxJZ0JJKlm2o6Qr3D\n8oFC\r\n=ZyaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcmhDPObgZHbq/SIWqyfla8NMaMtYhGph4bIC0nlvBPwIhAOkwDLj3sQPLyJelc+mzKCCGlV8R70nfqDjVmK5QYpUk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0-canary.78abbd59.0_1631568400131_0.3626435009441369"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-switch","version":"0.23.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/mwc-ripple":"^0.23.0","@material/switch":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-GaG8pKRbJSHEt1SuQIIpgE2dMDh+v1CYcS3jrCnSnYd7Cv1U2l666D5U9KuYHQfC+B94b6iDovKl3y8X4WHjBg==","shasum":"df5754968188052b7a9d843722597bd2ff8d7fe4","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.23.0.tgz","fileCount":27,"unpackedSize":94368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q3CRA9TVsSAnZWagAAcZ4P/0Qxj5/iqav5V4OdCg9C\nBF9XKKplVtocKUBH3j9jt1BKXHwlRxMuM5uj6V9E5RmTrFdHWtcMYN/7Zozj\nEywTeqbdoD1vdLdIqZrcNNFAd0cTR7PmfINydv7FtybJTyd2kRP/bNwr5pvu\nGoIGNS7PwQNxGAw4wKUBF/qTlojzdxepit8th4pJd3qLRHtxaiq0mWObSFjG\nBYh6K/9bERcfmtP/SJj9PbWT+HTOtQ6ppYijSCy3/20KcFmqlGdzBnrPtruV\n3xWRd+9kDtSdwcbHgkS3sxXdUlpkz3oqubeIjjADShfWgIFwFAsSKqzviJNK\nm/OoaRSS1CiT9SQiZM76unW2Inzz//MPe87qFQrPbMb35QI2oMudxKbAZfvP\nmB/Gsw28OZUKK1nsRyGU/bd7SUdBVH/ULqi1zJLl3D5R8Ujc6SsWjq3CusKU\nD3U5H7n+gr8EVK+jA88fmJKdVwMpEJ4Wg9EpiIAbiyVPIYYHny3LfnYJE3BD\npc0J2D0Q1Rt84Ms23tObCoZqv9c0uIpeXK8Xyr/FEtlE5dDIPezCSZWierDv\n3mJ2DPlOIA2VxlVF+kr2eEHBGPzuwlLrI0Xhv3Xe9GItWSxDXDJLs4dxfxeZ\nfIMUZHzk8U4vCq8lrL7FPBa2ZfLWyv7raSBI5optemZT1p1K0Vfk4P33LOrI\nwNEi\r\n=OWnT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnAke63KOfrVo68T0KcmQqB1th0iutE+HMjMFoj+EYtAiEAsyiCQ4c0zG4mkmkExWFY7mf+cwT6ejAsgCK3YvaOLIE="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.23.0_1631568951100_0.1988375114682881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.9830d665.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-ripple":"0.24.0-canary.9830d665.0","@material/switch":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GikG8jrHlQ/HkACTQAqrfE0cjpmMARjiex+jqYEjaYUrWmtpPfkfwQq+R8ypsIe9rr3vOuMKJ+U/sUycp+PGpQ==","shasum":"55c24e4220366ba3ed739c608b147f764dca82de","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.9830d665.0.tgz","fileCount":27,"unpackedSize":94420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SVCRA9TVsSAnZWagAA/RMP/i/7Olh3ahE06dwwdPC9\nlU2wqzIEbT9KdPIOaVAdI6kF1QLend+9wTTvDGEI8GdL6pfQJnULzvZRFjeP\nlxqlM2hFN11eyqVbL6sjFEq2gEFYhuCwVTUtLBYWu0sYJS2Jz3HJrYyP2WmV\nV+e69BAtBZluzBgCK41AGGO+Eg7v1EUGfM7tGf69Y2BoNlG4bMu0zohipDjv\nEmIjtVuhMgGo8Ate6uR3GSxr6VjrDrgl7P084gPSmtUyLvcT4amczjXygyGu\nfcDx6Ur+ZI6NsCd0CogbCyYjet2Eyl9E2opo9Ew9kaNzJ32EuiVUTcv96Oi9\no/Dcr4WDXPtl4GB93AKNH22Md34TRQ31SQPMz9StyJ+UfqEGnZgX6Oo+426Q\nt86dROd+s3/bH9kwkWvYpkqidwa4ZBcCmXs6OtTRrE2mJY4Pe7CvDfWymgQE\n260/RCHtoLZYUXqSwN3lt5MMyy1jBYBsMewMRj7c1AU9KhMAv7m74jGaIB/0\nefNzAT7BOiFr8AJIad+a5IzZBPZpPNxDAd76J2ZNMMYaTtDoqOcKkTagSOsW\nSBiZBPLkQsxABnqE/V3gRGDhlVb3SF1txKBX+GvXQJau91JtzeaQb6NuITTb\nfhUBEXw6t/QO0DSfaTGXawQOUlfzuLTq8zuPIGl6/obU3VKKnG7jEbvUlAQD\nMCX/\r\n=y+6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQKa0w7norPSDZU+qXGn6sJ7S/5t1bJLa78T+hdyx+kAIgbdO2wd2l44OdELDGtsXEqwJk5Cg7NV6idzpixt1s8Rw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.9830d665.0_1631569045567_0.08209306249237613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.20e2081c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-ripple":"0.24.0-canary.20e2081c.0","@material/switch":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PsjqncII8tDRTWiyG8Fnk/gqdcGHXAi/qW71TkO05oMNtIN6hfLYID3s8ANzBp/TIvh5AEfflw9cvPq5R9GgFg==","shasum":"ef0c70fc582ca662874551875b193d8c8228b645","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.20e2081c.0.tgz","fileCount":27,"unpackedSize":94428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+NCRA9TVsSAnZWagAA7vwP/jfyXhnKdiVbgTz8GfTy\nH2zWjPMBpvaGZXPJdTLuJl+lXjwagbAgPJ38EEnkKwksgmxOP0nyo/N12ZIz\nYjrzkaaulv7Gy4xH25/hnRspUigQoFFK0W6onvIgrdjXNa4tuhC9w6T744iW\n5AgOXRruuOapqHDk2INFxb9AJdoG4WiMXS+047cyPRYnZdW+Vtt9BpFxt/6l\nioSAWLH6ssXD/bxZO/dNxoyB6S04LtCPf0Cesp4v1NoCwQA1kg9kNCFNOK2v\nuyoZJxLpvjwqQRf8gxqf6S2zbLRfwUL4RxB3EyjCD/fvEMXL2VQEQ2qnA1Uw\nNTtwx7VK+6fPdEGQx0qLvvUu3CZwcz9RpcIb+8YD9G57/lxOXMZaYNKoG66s\nCXOZZUL2RS+gXTRTpRNVEKZblTEBZNhGSVThg/R8lsPgPKSUYkMfU0+uRmPi\nzuF/0oRRaPwGv7O1RdF4gxePFx/KCP57umlSg0yn/0j8qWlch5cBbBmff//D\ncHqsC6SJ90g8gr7Hhu9KOP6F6gpIY5cPizN96psWjD5doPIwcAVkieYMqgHW\n7Gv+Qzb5sVMSfGqebl9PLuG5m7DmBE+/C6KeU8q4yF5otS5ECXVhhc+bTZbL\nekh0BBU55RkyBkJu8vWhFjSta4gPC6IjfKCK4vijDjg1SqsWDUvmX2rEqRH/\naf0F\r\n=cXdF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWdTVt9qPXYRuWn2WeNLQ+1Pb15kzwA4FUuYVP7+XDQAiEAkdrLbeWBPFB1fchmbQe84+RFw36aC/zG7cB7Xtgz90w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.20e2081c.0_1631575948936_0.7234853886150683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.583613a9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-ripple":"0.24.0-canary.583613a9.0","@material/switch":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I6xgaGWZ5p9IoDT/w3g351ZxckgFIozp/ldcaUEaD+gs/lKECwSR6PZv39I4uQSJhdxfAXj9cECNWKzVPPJp0Q==","shasum":"8a8edea7001b75dc4d87bdc596860875aa1dc1d3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.583613a9.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQHCRA9TVsSAnZWagAAeg4P/ijfQzcyK+LGioM4D34c\nYtVVVC21BopNdAN2oq0UXK3eU8OVuf4cKmiyrKtz5C0xfdWmTM3vn/d56j4o\nLjaQtN9uTV6V6HaLipxrFWlEe3HBvbRPJf8E506itLe2Vbh4umzcC2NeCEfr\nsc5toUjBNN1+b/7zhi8vDhz0EhDYRmuCA0u2n0nP0KujRRciDZygm86hB9oC\nV1q4N5SgKPYTPvB+AyZqHq1PvfLn+EdjkR48Z+by2xuKLoZX2LHhLU3gJaQm\n3sao/VZwn5brITL6nsbK5SKxESnH/Z2FNSqw4BV1B5VSeF10RVGiamiCghUh\njV1cxB4jrG9CY3jDzLGkEcf6qfGk73Le3nerJLKTJg3OZCNscLufGUyElQBs\n5c1y+1rQ+ubnWzTkoUxM9tg4Hz3WDxeS3HA0ka2urpktRuL3D8+/8C9VP36q\nhVusi4dEdQ1ygC8GSp4Atou9XpG9bXb7ethlrl7ya5yx6LHHE5+DtQLRZEnU\nezPPz/H1QpkACMG0jlpzAb2ZWQ7FYWMEoHSxpzXfCvkMW2jwkNL6+kzUSL5r\ntNDiXXBC6ZjsBHmUM/nWD7ogiRhcDhRL/PrOvsyp6ePpYcoXYxJJtfUCBNgz\nJvitLafV6cMMnbVSMKyu7FuuSDDzBbE2TEj2znMLAMZUesGrd+bRoF3JMdAY\nvH3c\r\n=eQ/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWkIoHw0G0Ru0BWSpAZlVc4Nnv1jz9m3SpthLaFT7DsgIhAJwQL89h/BNNXTZ1447yk+PyvQP4rEyPYxTBAo1bS4h1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.583613a9.0_1631638535269_0.8132062589166655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-ripple":"0.24.0-canary.0e1bd56f.0","@material/switch":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dzhv7hr7ASjCA/dny4aSdjwrBZu8A9mTTF7IheGtG1m1JObd+slPJkLSM3kw4SHIKXVSleDq6cf5xIno8vk7ig==","shasum":"92834e0666f75685d08a0722453adb0eb3c5cbff","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.0e1bd56f.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNy1CRA9TVsSAnZWagAAkcUP/20jYFev/lMVdcHy46+9\nyXcO8YknyXKjlHMWnEQTfg4lFSPeN+hURHH+tPIuzP/jkjvthzMIBhu2pddY\nXd1VZZfRMiPsMr0yIFb/lVPe+kqBsiIvCZu1qOhX5R/Ke1AoeuCWFse5KAee\nfbE/D6gWyT1m39n9OhY3IBNvqYE0EbKM2VwOXfLYMTNNAGdiR7TWTWdiaVc9\nB3JZxWZsPq7cs7cwRR8MpyAl2Md9JLUnqYJHfU6g/YdeUn5PILk4l0qZcjgf\nSqiazknEwUUTmlklML0Iw2hkadRJypKmyNV6mr7qRzmmvBzIqOJ/vvyycDkQ\nTHONswdKaqagCJ7ss/NZbAA6L93Zg16jNFoIn93b88h4hv0OW+LvEWs1nfZe\n7IaUWJXzFUxFVqaMwNm0U0v+UlReRqb7dKKAZVlZix3Oor85v4uGvkbIWQDb\n0CxW5L+HhhlSBvOrXni6hCT46noD72qiF/4Bp3QCfpZSXycWCbOXPvTmZ4hq\nWTFQd0D+EGeDjNByGNTUqaGAMRSPhVG8qf1OW1gZi7f7HeEh+z8lCQL0PBXi\nYO/LAuvnEcZ0ho3Dbm9ypGJlA8gAhwPIRRG/3+rEr+gkjqaJfgsrh+NpQNlu\n/LxiVKl3UG3QspbyRzZLvXvcVihOBC4LoxelBB5wCMNs11r8g9dBvWeruPmP\nHj/i\r\n=V8JT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+R/HFssi8KDstEQ/jH3nBW5kKPy+Xwk9zxVtK+N2VogIgcmEn95bzp8ujUaGrmGx33NP6s7KdZ6tt6Z6gPFugO9E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.0e1bd56f.0_1631640757120_0.012967390583515925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.7bb1818e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-ripple":"0.24.0-canary.7bb1818e.0","@material/switch":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-590L5lh2Topr9/pGeu156EBIvLe5mmJU4e9YQsUnQyef4F5lqnU0uoffMyLmJRaQyCAhafSrvb09nBf0Uyo96g==","shasum":"7b1de7e0ecf262cd06ccbe25a343039c2442c1ed","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.7bb1818e.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/7CRA9TVsSAnZWagAAnUAP/jIyx62qHMiPr6YkugVM\nQ4nc/oxapX6ol/twZi0izdiTqnat1I1qm160chXWu82C1mLutfkmM/LlO49a\naUbr09LBXt8P4BH9tgaFg7FhgX2LMJkSTXSAGIOnGozVfsnXcaNtvHjopcRQ\nC3/meXT2iRyhm6WVaWe53+KnlBcoY2QQunr2ZXqiLSMuuK56jDeQttPKl5MT\nPggBsYcATC2gTJV5K5BoFDQa8SdzafLNg4yqKiZ5lOqbzS/r2ZvyNkL3LaM0\nYPae23eJnANPJv9QBtxljE2RP45N+l/ouPs3hwg0MZwMQFXbR/wMQ6cD1BtJ\ncXSPAWV0gRBNNIaunXFJ1Trda0ov2Od2ZQWbCklodQzCpgUFJhcLb2Fs7AwY\naKUcNSF/ArMGbmmr/v8P6iyn+NUEkTX6bVhgJRu2/lmqeX8F5kgKOCaNlTCy\nU1T1S37hjTSuvrOvPgLZDlKWsswJ++fX2F51cDV1xvWtfjLg1xOQrmY7UVcV\nLeTctry3OHdoyb3VoBuuQZTnV20DiUbyFFMr2676UwwRpMqhov6Kg9N9etwl\ntXudV9IkGyUfj0NITsYqVgVoxq2zhJYq51yKiVeYcD0Jh4G1vRfyU8UGVhLf\n1a64PEL6ZcOGoudQq41DJlXc+ixwLzsFLVtLKY67v3rmuw9K9ZkK3eHRk66K\nFYVH\r\n=fknU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzRhxJbhA/fYDFqYxVbr+cSff6m/8W0DSjTBCs7ZAclwIhAOJFFr/ZofvmzXLRKvaTF1ZPel6Oo/Eui7CJr/WdDwKu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.7bb1818e.0_1631666171488_0.7731977170960649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.b5e665a9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-ripple":"0.24.0-canary.b5e665a9.0","@material/switch":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F9gruvd+kBWtVe76nkk/ml1hsmGI0VG+QW/T9z6KxiSEUjDqS21FgUpnFc3xbrkrJio3GTSg8ZcsDTyieiiqbQ==","shasum":"50bc37e9c79874ab34e8717008faa846caa7278a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.b5e665a9.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfJCRA9TVsSAnZWagAA3tgP/iM5C3gJmlpVd9YQEHGt\nYKZ+9KYqkmxUXe/O0Z382NL3bDMdkzcOUKtzqj7vF+MjJ4/dSvMfoLQNucdB\n7KJ8dkdqImpBV6VCV1HMF8by2Y9ATnLNXYERbrqn4jj0tNcAkPz3llEIWVWX\naQICVXuZ1LhTVX2hguAmDyslNJ+rlxvAlc8RCmK+IzH3JHEfthorHty2opvt\nHMRubUp4DURYpu18jIGpx5sHMLHp6xOc7pvg3hYtRnaT0DKEA4c1SDM97huC\nIzPNaLAsLV+XT9Sx9i69tdfIn5JA9eoerPgIWv3dbD0cw0CXP7kk5uglgxlY\naKzJRnVbIR7oNCVAGf5a5khSKuL7EcEScRl2+5Vztka8YD/+97anL+aFwVne\nHOJ2Pw7w/LAeucMORzq2Qsj3gOh9wdmPO1FzcM4H37e6MhvbsYlST6Yp9jPs\ngYo8hgO5pG/HtKCf+Y4kT2mvGJ6hXlu/lAP3Pwl1brJD7j4DrUopHmNPiAoY\no10i0Fmtg0EF3oE3RIRDWdFrDTqjNeQTU3BVOAWfaOnaSm7MmRByfgJte+7k\nyI2dnCsetibuzA1oB+AnrrbFz6mb2uqHI150Nie+7qCD6abyx77Gg+wTMqkf\nrBwnD6ibBCLP86is1tynD1YdRoXwFr6MqKJwa21286b6ln8Arv2Xb6B5MhZx\nw7Nh\r\n=2bjK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3PU5QDrxJp3sYntKl3RxxJbKSImHn5tI3EnUv4T8daAIhAIm+Ftj/94WfkYwa73zQ3PzQCTeK7GTvCFIMk5T3UrMd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.b5e665a9.0_1631729609339_0.20724652377919583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.ab1e177c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-ripple":"0.24.0-canary.ab1e177c.0","@material/switch":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9ZPAimJa+vUyglwBQ5UI7ckkHIgSjY0PFBaP+41Z7d305ToA0cFsiNKQsLdfv1B5VRqJTjAeGffilEOt+aCjcw==","shasum":"6573712123f806cd29ed6e859fc2aff5cd46d0d5","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.ab1e177c.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj80CRA9TVsSAnZWagAAumMP/RmXwOAbSQi4PojEC0A/\nytzSQELNBcP3kmNY1/q69MpxafPq7WR2bxVziWG+MvL4TuWGMrPjZCyMo0SO\nqYGgM08JA64+RV7MbwYEeOjsjjVEAtRgkSAWT6v5KOzzuRUa+wQGjKZKYyds\nBCsqS8tT8UJDGlhrbDq+A7eud1IjHeN9W/TfOZAUhHYEhKup64LmnrQzAC5X\n+0NWHSLtG1ZkjDX4N3+qTrcVvs+vrI07RLEvCdxpcun0fJKsw1bohye2CBk5\ncnC4wVyPynoFT+/dt5gtVqUIQSkRyW956cm9x9IQF3kpPQewGRAfB4xe9Xsq\nK1f05eAQMMFgWVGzV/iA86clRz7aTUZqJZlJVigLeUpIEbJ17NSRjsOR2nbj\n9bnmbkZ3iexWx6ZIkVSds6voOMT997n8FICWKRremrGN3dRbPJ/zG7xbJXGs\nfXLREIuTJeCQZpnpKABc1OQoWxy9S05q9MUdxFTAcOsg0AXGWZcVB4E5AFvI\nYMhkl6xNx1mXvVaf2KZdmOfOfB2ttFU9MqZCrOC7PEA3K6GlcFhHy1I44ZKb\neSD/Md9WAVuEery6k3XfFZ+f62AHQ5Jyp9HVJicGOAwWowOvxjkV1v+yLrbA\n8HVQJfswHNm3fzCbQfXSkeozfpbOovckPL+0HwvvUuQL9yGpTy7DQEn+AlCT\nFnda\r\n=0x53\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYX+DZ1Rq7bxlYngUxJkFjF2hikfMjTvD32/7CPkQicAiEAkrfdu1fsOZg3OZtKGW8J7nzNHpGJlTSdn4uH2ruHVio="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.ab1e177c.0_1631731508485_0.2313682158300796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.8dff8894.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-ripple":"0.24.0-canary.8dff8894.0","@material/switch":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4lSGT3cTaRCz7+YDbSRSaQrXNOOSoy7YTkRDVXcHFKsnI1MCjFhPQUpaPG3WSPWcnCvAnGEC9p2feZLs8+RFKw==","shasum":"cd67f66478122bcf4c66083c47680713b854f175","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.8dff8894.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTFCRA9TVsSAnZWagAASeMQAIfhrvNhIinQhBjBbVeL\neF4NYMarPEJ3vlBXx8EmbYd1JsgrahHUlMk9nmnTp9lLTpTzs8CSy9eaN4KH\nhgiWrrnoQPoDYAxtrW9BVrGr+SwxR3yy/Oy80J23C+uqRtHfdRrn/UttFUi/\nmH/ubp1S7pjdGRL1k2TnsGfCud23Z7dwykaGef10/QOh6vWNq8oD9/z8KLtb\nJbG4nNmVzUp6yvy6E2QnqbOCMXb5Mb38vbm33Yre5XET9IIr+UAAnp1SqSP6\nfpaGTHJcjP7sZ09hawzH2bcnTADnuW8mAKz0Tb3fxCaLxuvBfg+r4cNei9WL\nJCQzfSylayFPdx7jQIgqhTdIrNooc+JDy6lx+U209merKO/zNP/H0Twm8ZcM\nQh5C1pjP9pbfbXTh+oPtixmVZilzSWO11PjnMomM93SARaZnf6QIl3zDJY4x\nYdkjn8hDkjXrksKtdST6p7dfEr62T4KX2XBb2HtwcJJL2f78NMoEbDedtHra\nz4BGpWsCT3U4tRcGO3sDwORYPkjGwo9BqEz9JoCxpRBGQ1hkd+cPWXgul3tJ\nPXslzVuv1XuzuGk3Sb5+XnmYa3TSNKz+x91U9tlYT3YTYuH8SsEv+6VgLe1u\nwvk/uuypq1jv3DoMR2le5V6n7WQjLSq4CmjdLJgmXNxYmY6IYMkuL1Dz3MwH\nBC1j\r\n=Sdt9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnhzThjyQl5UkoktkRuEySdLsrYcEMaNUZjAQpiQu1TwIhAL+yXmYkD5d0JKyBOab1myUP18jvninbW5QewJ9KyXcG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.8dff8894.0_1631732933208_0.32822333172441054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.9cd7e927.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-ripple":"0.24.0-canary.9cd7e927.0","@material/switch":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wh5iwaWz3VE3pAV04RxjrbFs0X5QkMiWHdrS65sTvW1V130B2SHcTYZWH4SEfxvtj9iownbDLeI3sdtTt3urUg==","shasum":"e274edbef46fc5c888a9385cb7c2ebd51ed6ff23","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.9cd7e927.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhgCRA9TVsSAnZWagAA+KYP+QAvSh6fJEltUo7LpUWM\nyf7LIz52qzhrOnfjitISbLSULl4U7uWxDpgUeIc0NKIqB6bRLvoPNWU8EAPY\nknoOQxWuBDvchaf7KYhwAW0sGJn/8ZFRLp4wXklJ8N1T3wrXiOnFCv2X2kpd\nOaJ14kOCJied+Urtfm45lAwmpWF0ROteiX1/MyYgksssJqo0+NvvB9JlafVh\nQ/oTcZIb8fKKMRadauc920LjGL/Eq5zpnbkXAZd+4au4dcDAFv3ZHZpifE81\n/YnkjksYuki+uoT3VcBrUjFNS6QvNHO6Xys//YSp7GliqFbxR81JZNLazH2R\njMYFnR5K4kkY1HA+5ghJqz17BzpsBPnA0FrbuQZwZkQ4yhUQuEBKaDysToDa\nC5K2OovvmeSi1UmOyXlYIpJ2Yxz3+v6D14YJSo8fD5mSKGbKbJVzEF3NzcjJ\nFnGqWgDV0ntC212Q673s20fm1fBGofB0RZpvqSlY1Rr0zu2+Cno5NAMfYSFi\n8cxmjiRc4AjTqFT3WUMOl4lSS26hAeSXckIZMdRmqvgVNU4OGf1l4zbqY7UK\nVLyDBi6cfOGWlmZikutHOFu+ROw+raDCRsYlS2iUadqi+wSqtiWWPKgMFjZz\nQipfP+2MZmo6gEGk4p8ub5HCZ1aROU/evIhAQ5Bm32jgdPZaooKSEI/jfbR/\nMk7Y\r\n=Qdps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVwTU7nqBOrGsB/QmTVzA+5UF3k/5BoRc32dZ7m1jaBAiBZgQTcdoUl1pOvKnxjtwV3Tx0vKEkYTOgMGINi0rpDhA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.9cd7e927.0_1631737952717_0.9177520190954223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.a7132082.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-ripple":"0.24.0-canary.a7132082.0","@material/switch":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Nb3UsojrfZq1Ik212R4nEFpeXCVkmdLJgpq+F/vsNL6Q0xIcDzdCmnmVWr2WDruqNSQ9Gn9oQJVBRbIJS36ojg==","shasum":"cacf6877bb1107edb9dfb5cad60686be25a9ac8c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.a7132082.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmdCRA9TVsSAnZWagAAFMkP/j7hb8hMT714LpmLa46S\nw68e5j1vjnnlGqJEwRtJTncPalbr11f8qBfobgWSM58de/5zjWguEA8F5W7K\nrPqvigo0rRqzCBWNCuTiRVpF4+Ul3YY6yt3vr8DiKsgJh+cbrPYL4Nqf+nBq\n7Q2ijE4yNNqo8VpSjhMIu/2Q4cGZ3KKV/pE8fDyIOpEF0qGay0Wy/oyGiPyd\nETbdBopk0FBpYPXqoUlo0WlXydlUCNk8WHembc0yxmem8cJFAiwd5y1/jj5M\nlFkw21XzrRjIEKQwCgpJmv/9as3szGvZ+XujpIicMmZC72P74dLJnCk75AFK\nfEqb7NvfWQdjX8XtkYmFEASthoP8nPo//wNga8F8xdQ+DgcYWo74c7YZn777\nZyOmI/eJGILURL7maq9BrD/hfkttnuQS2hwBo5o4tomTUmL1Ro9Or1dPHS3u\nenDpOAKimqXI8oVnIfjIK3tZc38ATP5xBuy9wQoflMDn1g8wq0T4AXpBOs7A\nwcnr3GspYrTMZoOF+4f17FO9s5SS4j6OmGfuxNvSS5qQXCnG0yzU90F+BMOy\nNF1Fxk8/JnsL9zE4z7Rwh1jhemmF7N0JlQikpr5XfkcbUAHNbIAQB4zzK/Lh\nQEpZYFCrExX79HAzOT1iS9/4UqQa+l+ydk4qgbWNs0QXABCoyHtR86uIM5XE\n4hF/\r\n=9Tkt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD7SQ/9A+8rSQGl8qJMIUo2xqhVdbUTLlbriHgVJDzQQIhAOjJEQPdLKWGt7/zNwYXyVcmLsDbsbVbAY9VhjYXWqwC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.a7132082.0_1631742365277_0.02311921467184308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.cd9110cd.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-ripple":"0.24.0-canary.cd9110cd.0","@material/switch":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tp1fVSFKcuT3MaA5jHrJKDhXWFK61VNhbR4pMCchzLA7B9g0t00f+0ftQM3F/GpW5imSjD/DDn4h0Ewm8R49Cg==","shasum":"5060b2a47a083dd336274bb4e3a60dabdd229663","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.cd9110cd.0.tgz","fileCount":27,"unpackedSize":94449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LSCRA9TVsSAnZWagAAyVYP/R2GBuqJIjXxZWkK59cD\nN38P+Ck/fBvEjHDK6skf0qxeYRDsYPXm2WE9mT152nN6wUpcocLQWrxJTaPr\niEVyGQqTy9AHlSm6wOjcorzt4LqspquNEEbQV8EpO64r0H6GeIN2vtyVexgD\nsCfiD6EpJSL84sC5XMDrMdP4XIb9HKfvkhmjI8vuN0jROxbDjko4/SEbwC/8\n1EFuXPF6YbeEkeuyRBukY9VQq/GdaU5aJvuLjs24jgbLlruKZxg4sMo7PNek\n0eyFAW6RZuv9P4uuchwbGz9JMCwIAgTMRfqwvYISOGwHR/BTp63QpEYX678N\nbNabP90353isCAs6ntuqH74zUS5op5gLbvE1pEqfRqyWb84czP866Gf7ak6l\nZUKc+Bv8j7qBK8VGPn+7yQCLEj4lHDocii65x5IUF9dbw6Ta1NhTeQ4jnJIQ\nQX6cbeEUED5R/qJzHg5+xXocsUmkz6d4LQzftlgjOondu1uHroMVOwIF6ECo\n3hta3rElAQLcbDdrYxuZAxlvuyaFBPtJMeya4wHN0PtRRxRhtonxdnKJLE0N\nsMIc1pb4fzbmtngwVOprMVzVZDAe0hJKwrzIPxWksGaa6raoxpgBaJ44GmHP\nbKIaTSGYLlvwBs9rf9YQDF5qHW3/0st0nlc8EqKFW1RdiNjogTH8W9aLJ+Fe\nZPUS\r\n=KvK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGW7AzalW2DSk7MWVxeSRgQ66y7ofs1ZgyBwRR4qn6ewIgVOVIe1BmDhT3hp1gnWSDU7ey4IQcVHo1VI0fg+B/MHU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.cd9110cd.0_1631814353810_0.6516449302152256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.1e5a9883.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-ripple":"0.24.0-canary.1e5a9883.0","@material/switch":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-LiHUj5kltOsBe18nfc6izEBxTqfa9x/phsJJ1SvV3DF06EdyYuA7wCkI+L4ocrKhTgGGLqohTFlNpzbXxEdhEA==","shasum":"f8dc3afae61c660e73ad3281c97b2dddf11c53b0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.1e5a9883.0.tgz","fileCount":27,"unpackedSize":94449,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACnt2Emrst5N9KTY9tl4vkfLcyt0ZLQ7/dd5BDVvUSBAiEAtpLXm8bL7Y77pAMU8i/D5Ke1EroGVJULAuwZw9gWT1o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.1e5a9883.0_1631911158067_0.9109776895116193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.32c830ee.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-ripple":"0.24.0-canary.32c830ee.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-8/4SwNLk+f9F62r8q6cS1yveiBakGu8gBmAMCHty4y6jwuqyLn3i45knA0NUBckkS2oYFCI+d3opnsaeQ/DsAw==","shasum":"112791216b548dc2491168ef5842b3f80e801902","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.32c830ee.0.tgz","fileCount":27,"unpackedSize":94449,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFat70rdN94Bg48B8V7VNMnp+KT1lRDZ4SSI+oFSmZAwIgTpG1Bui2eekJqL1IDFWmk6JZSbanES42EtzcaokYZMw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.32c830ee.0_1631920136932_0.5058785880249153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.1de87bb7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-ripple":"0.24.0-canary.1de87bb7.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-T6B15i2aFowsEF/cCVcLsJBtlhuwl0TFXSrqBU4BAvR3Mr7ugC9Ysnvj/vN4nj35b0FnVKAzdJ2ZO1RmwTdjyQ==","shasum":"f7d0fd92f5daa43e2dedeed6c9d1a6819f2b4830","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.1de87bb7.0.tgz","fileCount":27,"unpackedSize":94449,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5orPGh9EsEMy1LNxILnocUJiAzmXrqMfsWCc7b+LqfAIgc5TI6a2OyWxa4S81+/3sWrfcCoxv+GW+CtkSgHGrsxs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.1de87bb7.0_1631991140286_0.6620809398055796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-ripple":"0.24.0-canary.f2ea80c4.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-p/aIogtq5N8Vq8NJGhnpL7m5QGKHBcXsT+SRZzmJCH8StQeS7zpslg5FvHZhIRPHWMRtsCNABLQf++kMnBRX7A==","shasum":"675b0c47db46cc258363b4c7708f2f682e51a3d6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.f2ea80c4.0.tgz","fileCount":27,"unpackedSize":94449,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAlCzQKmUVGoEXvAVuoOsk/sbsH2j4pkC6kK1XDvrhrQIgVfSl/Hp8zKirf9+k0+9tT483siiCgVvX9+g9PVVhFYE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.f2ea80c4.0_1632160505876_0.49682949015400957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.569d739f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-ripple":"0.24.0-canary.569d739f.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-xPzHivjQttwW5oVsMU70Klmj7kDBl9CEM3CKw70HZxkeNBCaOrJmXJ4Mj+sZklfOpYZ1E77zKetfU/gvj2HmeA==","shasum":"3cc40e2b87efd0a381aaa1d55b132366df7cd77d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.569d739f.0.tgz","fileCount":27,"unpackedSize":94449,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAWosc6+CB5/uAW01I+HWJ+3yz1GdtOtXiT7R1ptUm6pAiEAvTVVgF+6R1SCnkxPoVSJ6YiGXRLwlMdOMNkirhB/J7k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.569d739f.0_1632173043560_0.26132012438238217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-switch","version":"0.24.0-canary.5a434a50.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-ripple":"0.24.0-canary.5a434a50.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-0MYaU8P6UV8DsgRGNalmp588oCT2Otvv6+Gyza2J64FPQe8T5ZIOM109oE2GFHU1aBCmUP5QIqoXQbAqJsN6Mw==","shasum":"982658b0516c719bc25c9199fc72d9c6aa8c2e17","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.24.0-canary.5a434a50.0.tgz","fileCount":27,"unpackedSize":94441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGSTzLQGmziEI4kRP16bAjYLKkoD67C3xopvdVCvKtlbAiEA/CCNyPsaY0Akt4iYwBMUGErXPcqGtpV79DgvDiUJ5VU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.24.0-canary.5a434a50.0_1632189657364_0.03471655235250526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-NQOJigR2A5T/4zflmXxpehzEwRkzenayjcn5FrJQYZF+KcPRAZ6pIU2RMUP2xQlx88tbBiBrUg/p2eeR4JGTdw==","shasum":"e57a94462c4ab727021978e9eaa06f86cc8f60bd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.b1c1ab52.0.tgz","fileCount":27,"unpackedSize":94441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt7dh2587eJjLuNdWG0Wivh1n9S9t7TJYW0r0lwjPXMAIgRuwv0+Y7C4p6PaU55CVXNwtmEv1ngoxeBp1FsLh1jDE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.b1c1ab52.0_1632193941724_0.9582811720957993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-switch","version":"0.25.1","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/mwc-ripple":"^0.25.1","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-xeseqMuvfGyol5n2Ppq3r235JPLf5vZGtjOYNMO5skfta8krTl5IjZeoxxRueGlQMua3Va8677vTETQOjzwe8g==","shasum":"361eccc739c602239e607e7e36a5ed76e1f8d4a6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.25.1.tgz","fileCount":27,"unpackedSize":94389,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnOaep/HU58qFw0cTW43PErXUeh2hLuAxIPYPLoRU/CAiAOQzlPW5Xzh4XcBzRehaOiPa0FdvA2ddcY8A3b3veC3Q=="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.25.1_1632193965465_0.8445949322149489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.ae060177.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-ripple":"0.26.0-canary.ae060177.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-igEHHxcVsNuSbzMSGxSQrnuJI4IMJHczPeX5fEG++usLYsIeWetot15NkkDwMXaKNgdg9JIJC0JCVe+gtfBLBA==","shasum":"6e0a3772e43b50c0c5bc8927cc27b7bd250d8497","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.ae060177.0.tgz","fileCount":27,"unpackedSize":94441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPInAcDKNEP9vjeS8WMJd/vm1dEUFtgSRTP5+RbVDeqAIhAJMf+8RpdjgwFs34f5ed3DIO45yke6ii1WJsanZx6Qs2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.ae060177.0_1632235099763_0.9724889922119753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-hTGKUSKXCFeOQ+8qeZnqVOYJsPEs77XSvFqLj8rD2Jrcv2gU5fA6eW2GqZh4DO0jq8bMYGCrPaykfNcCmA9PsQ==","shasum":"e5e5ae9fb0906c1249af8a73be7fb23be616cb91","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.b6fe2a12.0.tgz","fileCount":27,"unpackedSize":94441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnNXamrSVNBAGDxdqh4xizYVZlW7onSzNJ7aw6hxa2cAiEAh74DlRvivWewmNsdUApwTdip7aovjA1WHQUgJ0fHgiI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.b6fe2a12.0_1632341789140_0.9984383551701808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.07e91417.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-ripple":"0.26.0-canary.07e91417.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vpY5OJPZxgmD+UmrjRR58X1yKedz2WQo2IHL2A1UQQm9HL8ix7ZNhnmGcHi/B/B08+rK4nXrM6mJlXO5P7o9+w==","shasum":"fea61ce92a7b8568f3a1d179cfa3cd422acb40ed","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.07e91417.0.tgz","fileCount":27,"unpackedSize":94441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRaboQRo2P8ai5u/XLSVwaYlHLbii6Bye50V3INbzVGAiAFpyQhJg8QQydmOQ8NRx9bp3/8rQtfrcbxdyY3Dek7hA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.07e91417.0_1632344758816_0.025639654929975553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.e2203ffa.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","@material/switch":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-zpEoqsPv+aEx/sAsRM6CP1xhZeQeeOTv+blNyqDMmSyH1rblDAhKHSokeQU8YfZkr7MiuWw/vMy667RKWRGE5w==","shasum":"7973d1cb0c166772331dc6c1a1ec244484e221df","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.e2203ffa.0.tgz","fileCount":27,"unpackedSize":94441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNil+1fIJpgU5+kkZ6DBJhas+7tCUjo58kl48zzPnoGAIga+PbKdA59TaodVnAaDmsyYGzL6I/tAWEODSjuMw3oQE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.e2203ffa.0_1632421668910_0.6995517226198928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.4abe237e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-ripple":"0.26.0-canary.4abe237e.0","@material/switch":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-sZFNc5p7KSQY9tr9rhG/4JHGI0ZSdQRSCm5t7Ezq7wqLR2Salg6Z0Zw6TclBdmnRvWnMF/haXbWM8TP+jGBbkg==","shasum":"508c415ce64b2e1b5c8cba0a6b3e8e4cc6341c98","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.4abe237e.0.tgz","fileCount":27,"unpackedSize":94441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbc6acKZCsxrJz7eWvJcqO5GBC4vQ8W0jdSQgkuI4VjQIgdxV23FFQ7Jhy01pSz2rTpj8Grw3JJW5Mu+63RMKx/0c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.4abe237e.0_1632504679676_0.09232116881492303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.6278ee5d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","@material/switch":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-YAyKH7HdmKSIS1ME1+9o7yaJjvMWpArYOlRe46k3SuvLkwDfurl7jbK9d8xZL/skU31u7D+c6jCR+8bufBOk+w==","shasum":"616e792384e9b7299938359c5770a02293ff9a05","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.6278ee5d.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUhUmsF2aEY5ucUNVNo4OaK04g19YFHawE/R2P38wUVgIhAOI6UIvHc/C99BmnAzAWnf6RHT24nm0MosJBinr0WJJM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.6278ee5d.0_1632767493239_0.8005835627396394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","@material/switch":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-G28yN2fOn4S78tITUwbOV8d3U/IoOlCzoWer7JC50FaPDTJJbqIHdDMzZ1cJPKpGGwrZAlyfUr9fc3zxeSXskg==","shasum":"d779cc0425e51ec19d1bd0cdaa796f975b9cbf33","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.3a5d5f34.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBP/m6cT+lZ+ixWXXFLTmSNGgmoHXw6gLS4usnSF4kGvAiB+4d8nsqRvnvctZ6YChQQsbsxfOnoMnUhg/PIBPHTVnQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.3a5d5f34.0_1632782502095_0.8359761752847745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.143ed3c8.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","@material/switch":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-tYiaPw4gLP79o6n0izvK/oCBq2hSKT4dMU0iVgaQeULHnoRj/Ss1wTy6f8Gu7TYx9fupVTQha+ChTpqmdy2z6Q==","shasum":"55abe27ef957027eba35975708c74ba0d4b5d020","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.143ed3c8.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8xlNtwIWAfpRoHbXM56nN2eatIPFWwY3opxjOifpqvAiAlbyAFbmfJAk6Kklkk/FDo09qQ20I2XVPj5zqQXDZMrg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.143ed3c8.0_1632880261541_0.14955979648852424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.e5923d68.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-ripple":"0.26.0-canary.e5923d68.0","@material/switch":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-occ0yaVEtIaC2s5Aii844RH2ZGuA2BvKjDLWIy0ErBVrCnAflDxq0as6bpce7G9JFfrN0VOmM3dcJb5kO0B7OQ==","shasum":"4979a148a2018a871e737c30980b040eb6f8197c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.e5923d68.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRrEBCk5/649tgomlFbpYDEy5EQxiY/yOLxFZJ7YclhwIhAMvjx3/n3JP5PUQXZL0XOhNJkPvAeb0eRyMheMQPFpyD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.e5923d68.0_1632960361432_0.9015914625158912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.d8ed5109.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","@material/switch":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-k/A+RUnC4NVHl3ytve9CS7zuoXvRJ24XIsqT3wJ67pW/tatooKHDjbuK4jxssFoeYAarsVrRI1x1j0bZrWQ60Q==","shasum":"f1bf589675f0eec66e4259bf2a1ff9fc20a98399","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.d8ed5109.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGc45xymrPL1BVHosA48q4uIYbQPKFgBHP4+0GcHJneAiEA/qJHqdAdK4qgh3YP1Rh/DGLZEq04FADv81z9grfOcqw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.d8ed5109.0_1633044844579_0.49026473277016347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","@material/switch":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-fH1Gn/jsZnVBj2yIZjF/Delvr959eCpJwA97NT7+9sK4ZVHrGy9kRZusJQlA6akzHlLEaDHvVY0OGWIxA+aPNg==","shasum":"647446424a0fa2174d6c1f614f864f4642a25be1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.0efb9c2c.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH7vDWTjToS5+YEJheckJNhBzbN7svnE50fDP6fUh2lgIhAOIiKd8dnoOWOnbBRCAr8Q3XEyR1ltxxOC6451bGMZLb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.0efb9c2c.0_1633140507435_0.6643946503769003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","@material/switch":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-pZR+jL4LvKCZc5rjWygNhAa8W76N2xFdSJ2nh880iZvIwwae91N6IBjMi1oTPxxEXOPywMqZeVXJB/tRIkPzlQ==","shasum":"7bbf78aa73979eaf085e34b4c439cec75d581160","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.1c9adcb3.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIChs3hgTmVEL2IFoukdsgwrUq9BMSB98TzMsrXieH+FWAiEA9R424G18RQWMcu1KFZ0eWbsC9INN264wz/v8gcmKfGw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.1c9adcb3.0_1633368824922_0.5079838515346713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.dfc00d60.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","@material/switch":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-l82TsWMzOydx9RdoJ/oNmsUEb84D5ODaRylwpLu6E9/rHLszHhLLq8kXrjCV+KL2ccVMYdYH1GGPXBBne7GwrA==","shasum":"ebdf72542103b1e79fb00ce3465b888ecad4f504","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.dfc00d60.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDte90DvlPRM+BVK7SSWMKCc86e1nHEbyEomb9449OI9QIgB+xrf1dH5DcVQFCDQgLfzf1Ts1RkKaXCNXJ89+xM4RU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.dfc00d60.0_1633741045438_0.23984430936557422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.c3aa844c.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","@material/switch":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-k7dalZrJi/umEl5Rmw99MaMwjlYbOS2I3ppOpPG2C5MptYPk2lR+GFebWD9tEEUQShS/ecXypJJ6lKcMohqEUQ==","shasum":"9d8ac8985eb35995ea979e24fd66bf61694a9e59","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.c3aa844c.0.tgz","fileCount":27,"unpackedSize":94530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWqFJKTAx/khSPhVa0TivJfC8FZchv4o3MCMPSF7bh6AiEAynAFXNcECjJsJPvbNTOJayzrid8YcrGdfB3zW4rIjRM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.c3aa844c.0_1633994071679_0.9148470856021824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-switch","version":"0.25.2","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/mwc-ripple":"^0.25.2","@material/switch":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-wfEAS7cl1zIwdKf86tMyR+GgfnIt9K1y8TKTIkAc4Q1J9FezE1HIVTKLXoXC3UfMxV4jxQQdDg8wSEV/Gkn3PQ==","shasum":"da3959f96ce6f12984457f4f0ec167ec99c55b86","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.25.2.tgz","fileCount":27,"unpackedSize":94478,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpGYo7ZPl52euFQ4SnfZcJ1z+i5BdjMNGRESiS0t66DAiA/unjiKhLQdm7WLwySa6TNHGgfO6Td9RxPN/opUfew6w=="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.25.2_1633994313356_0.4288507565075097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.406d6fe1.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","@material/switch":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-0YO07VniZl6zf7lMa1V+J6zBzhM+nKv+4m+8DqliUO+CPw6c0m1EgFPswaeAJhK8prY1N845jCMu+JQeQ4qJGA==","shasum":"7995933da6be8ee4f0c86218b36280992819e004","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.406d6fe1.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKRNnp8FGRt4exWTDpAoDNQUMWuAbh4HlFLNPaJhDMkAiEAuHuDvDIuFbFBj3Pq3o3S0XicYtRSZSXdTZzIUipleSE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.406d6fe1.0_1634158779244_0.21781946259029716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.ca0a674f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","@material/switch":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-fq36+S+hJKezpW2Tjc6gWl0eBpDlw8WRF4t0EddcA8rJrv3GqxEZmOzkwtlnJ5SRxQwM8ZgiDMXBWpVV90NC0w==","shasum":"34973bec30b634b8045c199149d1f11dbe4bb4b0","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.ca0a674f.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf8tC6GrU3BbsAUMZvgRzHbEej9iQd+2w6kmBn/iYV5gIgN9AiEjbGn0ICOnszBDbf9tQ+rWU5SJjE30dFvtf5Gjs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.ca0a674f.0_1634593030211_0.4445946444454716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.eefcf660.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-ripple":"0.26.0-canary.eefcf660.0","@material/switch":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-uLicLxFM28pjcR/ybgG0bvsFCHUq1VSBBD7FTAUrDuNo2kM+6hfkerY+XFEDJOIjCZ8dOKBwBooEfNzfsnliwg==","shasum":"883c9c6aa1014cc221b0aa8868b7b1b89a6549ac","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.eefcf660.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuVCFDLfQjpypYEz6igm5Riv/zVuR/33u0kN+5vVqlhQIhAOFY6LLghyPTdnsDQGO07wuYLyOfZgr++n1PuI+2G2OZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.eefcf660.0_1634765027743_0.5544081995464336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.d21acc8f.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","@material/switch":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-467Rlubw47KCWQMaeNzlJNmIeUpm4QyRFI0wP/zCT+E6QXeAwPmvOJODzNe0s3JlQu312pJSBSHxvGQMhUHBlg==","shasum":"2e2218ecac158c13888f193d71b0789dcf74c7ce","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.d21acc8f.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8jqoVsN1YAKVLg2iTYAYajlpXk40NWS7l8Ry0MdZ71AiEAg74jZ3VCfe6zw3dYFIrE3APLjv3wdf6tmJESjryrhqk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.d21acc8f.0_1634769160823_0.13999254889291524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-switch","version":"0.25.3","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/mwc-ripple":"^0.25.3","@material/switch":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-cjppRf17q70SdtTP0twMAzODJY7ztJFnfDDZKM5N72F4cp2q0VvhIU42hfBCGLIEbXPQBCLG0dxqt2Mo04qCcA==","shasum":"cde33fdae5b33c7f9fedb349bac5f323449e5165","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.25.3.tgz","fileCount":27,"unpackedSize":94430,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHF5Cu/7AecIX0sL6Tu7creMnljBdt0KLGzA3G5AjWawIgQPT+WcwV+HcQ/32B/a8Q4/WUE6ydOL7F1HXUy7CAnZU="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.25.3_1634838944496_0.30937763480031943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.60449b7b.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-ripple":"0.26.0-canary.60449b7b.0","@material/switch":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-X9ZjNj3ZpNYgTa+8edy+8DfGfupFrntfq5qo/oC0HMrVT5bXE5GD6wRpfTUErLjUfUpJTWYWodYm/MzrdQIliw==","shasum":"36b5af23a5723eb5919c1c38f18a47eba0d1fbaa","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.60449b7b.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYZA28FggbJlcI3q2gorpv5DXVGdfY9PzEPZdNyGO3oQIgfcektT8DYKH5UvNCLRC3TCn5oFSl2NKhlEnrJGfxBCw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.60449b7b.0_1634840259975_0.6968456927934155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.0d8084ed.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","@material/switch":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-64Tix98K5MiE0Z1UjIs2MkRROSmbNg5NH4Mrlj7eVPcbSWesq4M8nAstD+PQiLDlJtsTLgurfO0JZRIv93Hj2Q==","shasum":"544f70c6f4452d1ff5e72f3f3c012e10d25cadcd","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.0d8084ed.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC2RbfZFkrLcsLihObMne21GiFPqwIPyO81oVEiscKmgIhAJOXvnfTlPt7Uhp2XFvdxz1zKj/gytMFuvKOdQlj0J7+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.0d8084ed.0_1635443106325_0.48684685854517284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.232327ee.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-ripple":"0.26.0-canary.232327ee.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3UkKE545YflrDYOZSWWPlEgDf8XiHhNBFyo5rzh/4+MZiopM76MILOZ0UbnXrEB4BLVkDAzdaLjDdZtGCDfeSA==","shasum":"c00bfd6647682aaa56c7d34975a9e4c7b5432518","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.232327ee.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMgmpy6lcksLe9VdL5MXEOF8s67n9qRleaQ2rNYFfdtQIgHSvXRT55UBksWs9ahRIjXnMjAqNpWJaqhm7f8hf3eD8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.232327ee.0_1635797758513_0.48047343275444754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.0a492ae8.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-0+BWuMdDv5t3M6kt5m57wuvbbEpxhDc+GvlAajr96Dk5dVBj/AhKAI2We/5yFRKPdzldjWxyFi+WX7KHmciVXg==","shasum":"088813077f38fe1c5d8af3d95ad813dff865bb3a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.0a492ae8.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS0BBz+ZvVDJL+KWOunjdlKkQin8wAW5JoMUGs7aB9BwIhAPuVE+bpcJhDcg7X4nMVJ8ghKeN2kO1gp7diBTAnVukK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.0a492ae8.0_1635847235485_0.13460666878604544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.0aa18745.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-ripple":"0.26.0-canary.0aa18745.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-2pWlnJzUiOvwrv4Ij68fzUrMlMeBNsuSp+yNHVK3LhaBkYQmJRd0gQ3X3iXG/VKrU0jc26GCIozS6FkJWN0bOw==","shasum":"abfccd8db98471acb6259e4706c39e4449ea9fe2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.0aa18745.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnoO9VKSellFsps1Bq+uC0X4aar3SRM2ZypqsPHmIhRAiEAhnMPqw4IyMSuOrXi6gmHi7w/RfbLPsBx2U7xKVsSwII="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.0aa18745.0_1635876482707_0.40659785877528254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.f3e28323.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-ripple":"0.26.0-canary.f3e28323.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-KrVFXezB4aFmWABzGBCieKr8qMt/XBELMf7hL5wPUbp9KuRH7/MuYWkhpHWdtlqz3l1a2kE6VhzP2k39t9sEXQ==","shasum":"fb52dd5a251e3d2f6281f99becf2cf67a577490d","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.f3e28323.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQSoRvGqfCRcGi0yX+lJ/s77Jxy7uFn2Z110F88hV3oAiA5DR1e/uimjiCExRONTAuD6gyC5EMvWbd0UkNNehHZ2Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.f3e28323.0_1635879585175_0.37028514969764714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.27e05c5d.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-1bEIxBiAmESpjm52D7BtySDx4kP1GqUHto78goyj2g6M1OKijL2kXQigyAuMe4Spyd9KPHFk3o+Xv1xD+THSoQ==","shasum":"aaa29a7f287fa97920065c78295df06d308f2c49","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.27e05c5d.0.tgz","fileCount":27,"unpackedSize":94482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICI/oE19q4gr2GWr9WPOLtGRNS37WDFdc2TCCiujN05dAiAodpSskDahiWSwP6Iae15g3o6fMUhsvjB0TUkNzi4oDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.27e05c5d.0_1635965110763_0.9501634411702244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.b9e44af7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-i43Y4idHAZt7GUzw0LTk8vP/PWLf5jcuFP8AbZf/Y91mYFnaANID1xoUeRb7vs7iDzRtb7nYTleerDoYSNgxjg==","shasum":"e8b2f56ab6b0a60312cd98ef614133975f1919f2","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.b9e44af7.0.tgz","fileCount":27,"unpackedSize":94506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwoySXtgx/aXa7TOSkGWr61Ne01s+pACHt4EueZVVnmAiAnZkIoADJYr2uDOMo2imySCuOdl2c0UfEeSsQqLGg+3w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.b9e44af7.0_1635966253932_0.0980494718215359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.448f6cb9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ok6LK6w2/SIbt2ewby8kd4KzVdaEqT2/kh8arAVLRqZdFN0H/mrNI2YtBNlaiHurvVECMWJW7BXdxpfsTE5m1Q==","shasum":"bb48c0b5f71ae280cafa5dfd7c75a59a28f4c7dc","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.448f6cb9.0.tgz","fileCount":27,"unpackedSize":94506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe24LcWNKDBYOpY8HUci4yB+YXnnJxhJG9ZePugcnp9QIgc9CaQw/mwbWwMD3e4ZhhLmr65JfPlsKP/VsHkEiwZjQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.448f6cb9.0_1636049285763_0.10053676058291372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.8067ce28.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-ripple":"0.26.0-canary.8067ce28.0","@material/switch":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-85Ut5dvp4xmNZWzZiyz/O3lshTyvXONIrIBFBTSf9d/KFmeWDsfJejySKyk2zM45HudECyVYqPIJUECM2CLMnA==","shasum":"646144e2796f43b11a1b1033c08a9e83ec654ed6","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.8067ce28.0.tgz","fileCount":27,"unpackedSize":94506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWRmgrBlxOiCKHnr8EK0IaGvQTVJ/2eoxbylHoQiyiOAiEAjGh7hk/o0UYAm26KPyfeE5Qx1X1CNWG/kp9QfCDIXEs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.8067ce28.0_1636064558354_0.11220875815911202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.345c2bb9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","@material/switch":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.43d08ba77.0","@material/ripple":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-dYmHvWqu5Ly85VVqjLGAxdSMAF3sk3cEtbS/zfx3HZud1VJ9MRppmrWtTDp83NfaJc3lDe0CKaT0m+NugHRwxQ==","shasum":"6ed32a5fc43bda6eaa25ad520f0e9f5808d6bc25","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.345c2bb9.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4ECRA9TVsSAnZWagAA/5EP/27seeTk6WUFGHzdx0eI\nUvEZjtm/O6ASfgs4PD+pjsKSR6xExPfvIv255BRAY/8I/NwdLv5HJiAekJdL\n/gCmDtqzciu4GudH2vXO5n5JJ8yGstM4zOGajr8TbGuYWbWhKUWwhUCNV6yb\nm4tfg9qynNPdJzTU5sAlG5uwY03/nxgJBXIlIH2OFWAC6kuOoXvZlzdF9tUX\nq/Fmzg6m0Dipqz9bl1boQ35jV02K9A0MaF9zpUTdOuG9SNL4l4GrympaEzwl\nuN92JrOMKCDzn1xnBEQ4WGG8AjqxVKKYOok3qnriyWA1IfarLsPSBE7FDjqR\nKQyDysgkVK8r87puLRlS6L7ePQtyTIUdmxUqmZXJGr4syGQp3Lr1IY5dYeil\nS8HMzqIOGsuo1WBIejPau4LvBHOA5Ae6VvpWeMEDx/wEvo1Q+RAmd4vMHqN6\nQg7vkLu8FRgxrP11dy+FnQAb1SohXLrqy8xihMr5/hGzusJgeQYWYcYmzYiq\ni7zQRIFUVf5byXrtpfln7RZLeNmh39qpG6aTgUlMbF3AuFIWIo7VsFw2vlEK\nfdrMMbu4QQLdBMpNnactEqMqCyugANuTavfQi5Vw8bhmOmqquCCBQehQBwrw\nNEIqGvTGl8DvJj339I8+2wjtdKdflXBjkMTqxyhexDFig46TWX/2zG+3hxxF\n8LAU\r\n=i7Xn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8a0Pb7pl/QwsLzj+9AcYylIKqqUEDWugA9p4GCb1xpAiBXbHE8t4UfZSgWAKRNlmXobkp02ioibBznePkrxjCzaQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.345c2bb9.0_1638465028054_0.5295407356346302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.0547aeeb.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","@material/switch":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.17a072535.0","@material/ripple":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-BSsHovoH+y7VcQQwafPjfEfHtiTHX9VlEY5deJwm4hh9ijMd9Yvt2So1jd21zmzJJneyx12nBSqc2ZvkihJLWw==","shasum":"ae1bbe456d0e358be5bb5174b93e4896c7d3311c","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.0547aeeb.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwLCRA9TVsSAnZWagAAzvwP/0Plh2b/2iSt8mL4HzF7\nZ518l+B65OmsJGhmfjv5MHOKQ5f6dhtHPkDArEfmHvRyBttekzBcrBN9U1rU\nL7f2g/JLTzUSVQnahFqLJMBVQHuPObUCRDBJfg+PshKYK0GapWWyyzevca4x\n+SB2ACf4mEmhrJec1w/XjzfvDUDlWuf6ednG4pGEukD14xxa9DM00UlKMOLg\naLvMvf12WHDFzNEcKDyes+VuTtJMyf1SyBXD6yUwVjyD71qGuBIRBPDbR6Pl\nx0+6tHxvQPLDqwvpPzs/7mJBv48BBgPZG1RbPI7CHjLID0ts1VX1XAI9MDh8\nQkEncnocgySSZIpaNHwKQb8zeo9lM5JygtL2VAP6407YqGLB4iIzLpZlMU9K\ncVL8YIOHMBXK5oqyvjh+SyU43KhsBN7IPVQ+Suc4CUxJgl+LBNYZGHwffIjB\nfzjHyDoSfycLytrUrAwKUgj9T/pJyqU11YWn1I25JJp1MQn+4PpGWR4E9xv4\n3eeuTqr3WafCRPPH9E0SfwNKUciBfG+E6IdPqLfHfaKa4dB1cg2DPHgpnhtP\n6a5KkwsgVozTJWOr0s8PT4tl4n8XMP27EmumCR0uFwIV9ZtQPyvw+oYesQDX\n9UMWHHkLRTNr41a2doKh1+6/eA12wTJmvZ7TGYIMdHbrj6Apz9LmEoyW5SGj\nwuBl\r\n=zwDp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHD3JT6wBH5ofRthfh0l5MN8c8e4q1N1nKDUXYHpjK0MAiB5O/WUsUb1AE1h8dkssEsbiF9rtzo0P2OPY6cUgI4wyw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.0547aeeb.0_1638808587213_0.3037558248473209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.3b2452cc.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","@material/switch":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.b6510c8c1.0","@material/ripple":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-bjtpi93Xwe14IgQ0aPL4zyB19VzlszQRRfbRYbtv6kAsnsJFsrJ1nK+tW8DogdAc8vu2fbOx1GkmaMvGU6q+Nw==","shasum":"5decd67b0e2635cf68a6403b1cd51600e93b74a3","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.3b2452cc.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhlCRA9TVsSAnZWagAAUHUQAJl07IOBZ26L8uKFtmyC\nj3WoK4a3+AyvRwGXGkAg8/lhuaebY/6eXcTwzdoFRNXxQCaPZtbOxjbtf3WI\nRBZSZEe9ECjHZC0wZlNGONFbW8TQtGKm6P+yxRbeTZ9fNeWu5v5o0vCSw5gz\n9bIdXR2ARFRRAXMg/9r//5wQ085cXeIXZl4Hx0fvX33dUDQlAcbG4itOCfyi\nBo1CZijUWZSRtI1GSPie5DNVP4Lb/qhsHg8hFUr/pUbDCJNgbA57KRhPMhLv\nw4yKML7HfwONGLzcx5ZGv0E9Cj8PH9zyW+sGh/yPQTs5FrR/NNhjPbFiHdfy\naIXB7Gfxe+Hioxm9ewTfDtdThF6r0BoXAls3MQXEdE/Vv8NZEzXhFa2WR8wv\nrELdtuLrTI2xo+ahYIGgTq8EyfVw1kfF06zXZfQeCgUvZxGc9Bxv/A6oQ4hP\nvNqkkRC+gjB+dw0HpQAYpYUWijJVVPzWCXrehmE9iwtOo+vll03z6y2hVOSF\nbIx1FbRutWc+OWcZ9+mOErRRApDDnn5NJSo765bDZrEBfxABRGSLgfBJ/E73\nLCUqaOzGIlxrA/b5+CIRMQEtYifREFFU3475alWayvTKfxaZZBu7uJaIgeMG\nGRLVX5jApTwu/yD1eGzlVSqKclVKvbKaf4c5DWMFTUfhpQJhGDkV1eKqCS/G\neH7P\r\n=L/B+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNDKhbYdMRsd/M00/bGe70HDa9E51LR7AgHE90X0YkUAiBnO25Ux78T5b4Kl4+KBNTloaz+/Y4DViWOLuyBL5bK7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.3b2452cc.0_1639008356900_0.16745737108715142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","@material/switch":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.f460e23da.0","@material/ripple":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ZjQRTimS+VGL0VAG5atHakRnLIbGhikCI2kpLN6IRk7NAI5WgbY4iM24iUy7qi24TBYF5vF3Iurk5jGKQX0Glw==","shasum":"401c1eb7e228c93f9e45296de3abecdd7b01fbb1","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6ViCRA9TVsSAnZWagAA/MMP/12yorYnuZ2qFrZB20tj\nhYB072fTSwg9rz2/ER1Ptu3JUZ0nPpATXjN/70U56uj+Tqh/UNngjVP5T7v2\nnl9jmn68Nx2bVay3/XbJSiAH5yBlM2wgTUBUvN8fIilTL1GkKlITEV8yjZR4\nEZ1yfqJGikylDBpMHgG884cC28YnYtFvUoFW2SvId3MmUeucOYrqakHVm/RF\ncAQEKWCioWTnTL8jjv4mM9S4QGiSN18CEzqeaeDRmxf8sr/21KMPlDoIIsuS\nA5ZDdoPSvy11y2rz50P3UKYf7ho+hxAu/UnHMoBMGfrfHScFy/yH9vs9zDbZ\nEmQP0Xw+IA9BCIFA/LyuVBPy0h4F1Hj1GKd70uzAc1eaVnIldpXkqipYSvEA\n1JRkN++CD7OKLOMcPHv4m6PshDs/uhHgLtwKlFCw39Ce+zQ9dT8EnpgMfwYA\nnSvaAD2GwBsTydSai1wt/kfMh8JnQ9syep7ZUbMMdRzQDDvYBDO+KgwmyP/c\nu4J+8pZHk2v6T3N7zWVZNiH65Y4phtaIv6H0wm6SHqsBNFmAyTnJI84xTlx3\n3lBMl0sN/mw0eYNHe5qytYAitx8EowRpAc+2Zb1fr+/cyV3IPMIFzyVIgo0m\nNT1rvT8xkRFfhpwizi9d6S3j4j7Jnc5T3A5+bvquNY/OWmmNtibJr/OH59e+\nvUjG\r\n=jtFk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHKMa7FlAsZM00m34kVhTEgd68dpkOb+HaS8p+Fdh2CcAiEAu4PZiLhW5R3WQZurBKmgtR9wC6grzhKDaHVYN3g2Ztw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.cf7ba5a9.0_1639163234734_0.0584950609455368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","@material/switch":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.3366a71d7.0","@material/ripple":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-W21YuqQnXjGM7tQa1o9Fb7cMHYzEmgPNqPyl332laseMAnmv8HjT54nxKmODxfYTOWhrpNkFmfRNQhUBPvrfyQ==","shasum":"286fc955e084bc64e496fba30db6c6c39920cf7a","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.e1bcf14e.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eBCRA9TVsSAnZWagAA/XQP/04r2f0Ipz0rq/Yw9OSP\nhPQ3kPFNwdgIITQnYIOdDrolVA7JYkJvQ9TNP3JB9Q+JjI9Thn9OHUNXosN9\nb7tlpL3ejtQ7aO4lDDwF++BtCt8hwEdQUNDJckJj2N0c+TL1/i/zwAyMjpot\n373musYT6v9ROo1R7UJdH1+uzQsdt7CVXb1rzH+LXs6iM1TAuS3SWtFG/KgH\n8qXyTi9Uw8WPWNlFu7+TJtsxL6DRwBEeTVGTBvTwmYupZ8yDln9zuyx3pSr0\nCjuhxijEbH5vqYzGH/vDAg5pjYS816MYmyDfX6tKXKztndVbW9qoVgDm+6cM\ndOr3LQ+vg3TOJwoHcVuqjnLUJ2jrGocPvgTCEC4p7SgHTdcysfsBMJkGPWtc\nYSLrj0WRaeoQkRFZ0jpGdLYrNdEGUcCNZXJV75jcKo+aq5jrHxN9mSRfIHG7\nq/HvTzPujhpaiMSQ2tXTIx7hJ5+GW4WUTK6Y/ciWM5yyQvF8f2sLCjVuZZIb\n7erSqlLHXEMfh/gJHAPzp5J0DM4w43MVyYRDp/4cC+AGS2gLw/wI/tlkvUWJ\n9WCPRc7ZNMkLuB+Kj4RZ9XDOTR5DVUKRPYRopczCSSbi7Rv4jshSrKoiq+rj\nNVbknrUZ6FIP7RV9aCqj36GLLoF2D5xxIkgvRiApXTeBuo2xtu1aUdr8KiLY\n24AW\r\n=imPL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDq8ZtQnnzOl0MaU2PNefOhzjVMQRV25nDZBYgSfLIVqAiAnsIWPAieNzsbacUDwOPFrKnilTrkqVs52brOrvqEMfA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.e1bcf14e.0_1640724353365_0.31956166461464464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.b9d35b69.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","@material/switch":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.c047f7c19.0","@material/ripple":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-1LFUI1RPbFgOjR0eIV1D1MwawUI927Ne6BEZFw/SFtYTFSI1UWXpFpQ6njMdntnAaxUNu1nqjXr6wc8znbwyQw==","shasum":"9b9d150a43d3a99612cb91804109948f87cefc29","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.b9d35b69.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMQCRA9TVsSAnZWagAAEQAQAICJ4KXiQZOP08lOA+5a\nu1b+xB5lG6WyUX5kqvDQcNFfvfAYUKVLZPBH7TjCGRrpO5MNXov3Owh4I1gZ\nDMElRgyRYdC384o2KDLFj5iI431HXau6i7Fl4/FaOnaFELjDUzaVxxpBnMXa\nOr4LbJt3gE9cxkaKPYS6aG/i5jFs7i1uuDiZzzcWZA/ixMguJuOOLU+tYXdy\nk5arYbsz/LKLf9PNDzG8BqgBF2aLPSUmwwTRFYP+mVpRDjHTpMa9+6JyrJjc\nxL/UQjPzhxCpN/HLtq4uylXB1ZZ+7Wn+frIj1QYde1luSSvVF72nAiPYuCFY\nQgd6X61wyoC5UjMXN6yHW/+y4P2rlWMZIXJhnWK34AA6x0ETystsghKdyw6U\nqGz4aUnEBYQEsS6WDt9Dp3fVxAZpGqQh1A8PhEhHFuCI3hqb+OZ+aUSeBhvQ\nUfYjbxAU4ybdO5syftC0C6kk/vWa/etf5UjPRL2GOB1ZamMdZb6cmuSmCGUs\nKR9QfLVfU73+R1FHxko8LicVsitpKkcialoHZEgZYoCG5zLQqEJ5fIU0MU3U\nE1agd9ynioNkIR1ZGrL0KipV2VzQEivaHTaPoOfP74BilI8XZDnRRM/pwYU7\nB9+m3SlZt3Hgh1w9CXgQvEFPBxXzWHLDxp7HA1djq0chALd60ELvDCys0y68\nMfLy\r\n=ShW1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDITCZ7UYNgMAknMhm6CCwMvZ4qOXqLMmRvSc6K1gARRQIhAJiJHrxpVWDQSN4BIMOVEhhfv7qCwSRbBTJXKfgoXWv4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.b9d35b69.0_1641407247947_0.9361986728091443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.2afff08e.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-ripple":"0.26.0-canary.2afff08e.0","@material/switch":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.05db65ec0.0","@material/ripple":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-ZpMrqIEq0ux+zNcJzfwsw1FRW/JrGtq4HaClovWQikGqe6E4OXY37soequ21K8uyFxLGMQ2tAPiWHeML3oRbHA==","shasum":"552a970fc2a4c4abe7d4a542cdf3f86082ecddad","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.2afff08e.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vPCRA9TVsSAnZWagAAbXMQAISAl2cfrgd6la+bgpMm\nLWOujx8sC6w5JencnLLfCNxoZcKOC9pc7u8ZfO2/F6EwOiYCP5JqdQFPPwue\npYn99DcytRw+gJJiFDgxuA8f+Wysku6P0e0w5pI7IXc5UvXYbCfmpf6wHnhX\n6aCUOqFVYhKWyALUtxK5VmFr14ftWR4JmJLbzC0pt+j6qfKvWue1BusDjy8l\nziUkhGvVZc+vTB77PtFgbd0sDjqcWIgsgHFBxLV3UmG4bzi88bWzFinGPcMu\n7KJlYITi90+JfKBB5SxlERstk9GQPEjgaHQeQAMJW7RZwlOtXYnFq1WQh7J2\nYu/pt0pT4VMfey8TvaHPsOvLiOS6iMiCSBjodYVLWgSUGwtJLw9YR3hq/S9B\nTn229BSaiMiKYEUT6kkGRjnMjan5e1F4+2Cph2R6QlJAxkP4+7/O0ShA2FSj\n/+xo7oUNsM2BHfxgo6uLbUKuT1O+RLU07G89Pd2SnLiL9GT/XrjDRdlpwbYO\nInX6aoZkoxok6EscGLtO+o/RWDsKExMaib+lQQLBjdRn51X9wqJ3T2ujgmX5\nW8uvuiEhabFkRAJ7E05eeUaFKlBpmFkWMKFJ7Kf0c/AQo7C3/nUoyHoLSA5X\ngeTBQa2pat2Id5DTKZIydovB4fIcbaHTzbxTKMLC0SrF6XKH6ybz18K8B8CR\npTqg\r\n=bR/A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCElAMczuT1Bc6IyV8socCaN9k/lCw5w/kvT5Dk7bIvGwIgLNrYo8RTq7ma7w+2ZLJuFCLhkSrOHFIUM4ZViQ5DSG0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.2afff08e.0_1641507790845_0.48932906495173256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.893fc857.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-ripple":"0.26.0-canary.893fc857.0","@material/switch":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.6ca8b8f85.0","@material/ripple":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-cr4X3Ri7CbVlMmNXyUS6R4jQ10TkRSiRYsTNO1nksTxuTG42f0rHeyTJCfyZ+sVPv3yb85YwhkLE2ey4kCuBAw==","shasum":"b1b0d0e2ea7bdaf982e5958d282de96524432e5e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.893fc857.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxTCRA9TVsSAnZWagAAwEcP/A1cc/yCeKT6Smxq6Dx0\nowLdcOoVEjZ9LUl5gEefOBQu9Ip3G6IevegMxuScDOfue6pJITBpUIsHlm7C\nUf2s8ZV3/MgnfGwLrbVoPxAVk7337S59u9x9B5QNgZXBsTQZUx2NFhd9RU8H\nrePQmtyF5MawcqJjYUv5enymqz06LYCGOfFlxxJfN6pO0g+TSCvTaZidUJp/\nKJ4sLhZaifaBWiZ/GvkiHnpYeVVktui792k4x0lP3Cl954V3DFvt1kCBQ7pT\nsqGMze8GP+tWfdw+a79eceT9LRCE2lHG0uCcyzd4Nf0d4JP30uVLHQV4skGw\n9uA2DUW4AAsoCKn2SaXSGBgYYKbIlaWouJzKhA3LxDQUtaTRQt+txghNhAIV\nvQ551xUeaSYSWZDCUCaFmnnTWdRKJmtpZp/DRP39M4qCs4aI7BXDVvkFw4t0\nZYG5NmRo9DSHF6CLUFfQGjamrSyvL4LPVysRJO6NbnJPspksq2+vCq53BkA1\nHo5MfO+R/zFANTzhZJuJmbjGO7m+h1hsmaOvCykSTaekjiSH+z6rGhk5g5JS\nIE61dS98hB71dh9JUkdiE18PQtj0JREDrIpNl5EwxnyveQ/VNqaPIXgeyTMU\n2obLIi4icYeOdfl7ZcOMD4FWQUFjbkih4OKJfEXwMFr8A0eBqZpqxAV1dN62\nL7xK\r\n=4uGX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmiV0RJ9gaQQdjgqeIq7G1W/S1nNwBNGJ6PTtkpDGXsgIhAO7CSlDmZMpTpKiW9YpNybzQVBZzKQ8FEBvpfc00R7L4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.893fc857.0_1641581650971_0.46450547979152246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.69ba13b7.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","@material/switch":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-J0JqW4qmB2sSx/EnGMwVYJGYH/y7kOuc76J0LOthX/tRgaS6czXd2svWgqivX/1+mq3FaRkrieS2azuo6Mnx7A==","shasum":"14a7055fa0a2048a9e944b7aa9cfb60092a220db","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.69ba13b7.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+GCRA9TVsSAnZWagAApbIP/ArDAXx91XObVXmOO1gE\nPFxy47/0etZ5afNFKRv2V5vXCwtFySn3A0ZJaxkZSIt1eAKAdfLp5mupNIn9\nUn4OAMDnfR2OOatp1uE2uk/jn+3m6MAbSS8D+FD0YyH7e5661pnxr+caEV5Y\nYzVPMD3egJbS1M9JKQxXXuH4amDU6ehTUnISFHit/64DfHjP5KXsXgJ7u5Yn\nw77NzdTZh5MCZb9vE9DooIBnlt80IIauxsQ3K8ngl2p5F4SLgocpKF85fuhn\nhdyY3kRrL5UlY5h7uLg5vBCCNJ16EkCEVzlK+sdD8NY17MpB3eHfkiGWR5cV\nzV9sW7S0qdsuUBZlQK9w3eeUHiDnt78DHW1udQJBoi5GrdJIoajqpfzRo7bh\ncDnyEbU8qf97pVRacSrPFni9ilhJFGS6F7rMGmbJ24uEpXn0MjrSyN9tEZNP\n0pylIo6jbRxISC7cxq7m1cVnRglmngWvXmskDSl1UjapF0ZUutMdvqXAQEZQ\nowL95geVRx/qtWqlonETYcpdGSDoCJUsPm0TMTSbClHNrXR1sVOmyulZALeO\n1cPozSXKLYwmsSjeCThy0t4+og/5DdvhOXp6BWy+w2JjzZuo5/uWF7TNtCFA\nSffg6qrS/QoBTOznF/QY8Ocf/tsCQj/O6A6iVG4PfEl4TrW2JqgWmexW1yKM\ns4Rx\r\n=9GF6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHoCG0dB7j+tJFAJXmGWdBEB3RPvH3cUhCkXJ2qMwFigIgRvkBjrnVKDg9wnwShJ1Qoc9DM84DerNcA98aleaxyuM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.69ba13b7.0_1642631045941_0.9477173033810866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-switch","version":"0.26.0-canary.0af8ade5.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","@material/switch":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-Eh1hqxG8T10alQK6CLVf281KtKe3fh8Q6l6QHVCHBuSjBSosFAXISX2tMDB/uqZH+rFq1En/MO/ihs6jcwKfPA==","shasum":"3f3b5f965d4ba4c58c4d657e24e3bfc59361fcef","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0-canary.0af8ade5.0.tgz","fileCount":27,"unpackedSize":94998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZejCRA9TVsSAnZWagAAuLAP/1JfV3Aa3ACffZlrLJ4u\ni4D9GsLbNnRdWKLzNKvi0vh0HvgprVvfxOYYw8DKezgvqjupAw91qEPMg1CW\nNnQWpWwMeepfYWSBR2KJeW5Tayb1nRoULjhI4Dm89J6VU6ELHTWJi92crGXI\n51USGroJ2liPQq6dcQHyqTMv0uqaNkzCMRdYVXaHYh3o6GazTILYYnxogWLe\nA+i91B8MXzm1uh3aVh9CNKKGvf95MeUzHhEWiLmWNa5eNIBEEabSmU6bE16f\nwm5OF9G1SY7t2sN0GBZmB/3Gwy9AHXVPMspdH8PIb8lztYCteYi4yF4aF0js\nylRj3iIFMf7LLAmMC2FJy/3Bnt+RtgF7aG0yAHeeh2et65p7op2DjKkcwu0i\nPPHc/1ajMKqLuSxyPJKYZ004sCjZTxx7fUIkRRb76IG2zJmk6BYr0ZOmc7gg\n801Eg+fPVTpz9+BTCTieq9DW3V8E5hbVhaSAFGv6IBa13DbImas4ZwF637Fw\nwixMqkkNhGbK63Q5Gp14tuX3SV1nG9pKyum8Dr/RWK0Qi1Bk+aTtmTF1fmNK\nplD36TdAKDs5rq8NQYxvOud2tWAC4T5tkVCYzwoi1+O3tPY/uAv+Hj/1CntP\nmlWJfed01qyfpaj97L2AyZvczV1kHWuF+lNHRFvghK80gjIRtVcE/rChWMMd\npSyE\r\n=4nRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/TicKd06yMe+nL66aJSh6MuaAuMmq/VUC/qTvWvK0JAIgGYjcPIkvDtCBjy8vGz2kWR3EWWnUsz69qk8OPgrCRYg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0-canary.0af8ade5.0_1644271523029_0.9227985643468823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-switch","version":"0.26.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/mwc-ripple":"^0.26.0","@material/switch":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0","@material/ripple":"=14.0.0","@material/theme":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-X5NU+YSEhfSI54x6ZusWdoLtisVMb9UHjB4zhKZGJ280XnBt9fmV3SG7GEzDYV9YYJ6OvB4cHAtf/ewBanKgZw==","shasum":"aeaca3f5310c7f07aeec79c52ef60f03b1103d97","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.0.tgz","fileCount":27,"unpackedSize":94913,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+dk4eYRfEtmM2tHr0QMll9sRXid5RdGT1k/24atk98QIgauJPtv7gSCmA5YYzHUDEHCapP25rsm6UJvxtu4veC5M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbmw//cEvBZWjCyXOhThSa+tFlAHdH8a0HUo1ncXVLwKhOkhYX123D\r\ny8JwRueRxRcLTJRTxu58k2iLbS2KzkmmlOjjKVQWQLiNtESCrbd0ZLV+F/md\r\nCOtflmS/k8XD7eDIQ2ehmLRT7nQm2LbyfrAXb5FpZ9XFd4aU4IvkeS1DM+5D\r\nx7HqMyuI4hRW02IEgPlQkI2qUT1R+BPT+VWODfkcbwsvk2BLiHckjru7GyM3\r\nQdKqxLT6xMQjZGDeYbbABMwfoOTclwqKCONFHjjsuoymTmOTgRf+rqmPSjSd\r\na2E/2hb/FVHnvNmgvLh3hPRXqYKud+AkrbbqTUmwYZv4P5ecWCO3It2FtYlT\r\nYn2ZVP4hRbqIGjRkezjVEXZ92RbsyiUorVFf9qK2xD38V9h53iPmH5nBUvRy\r\n4JKZukUvUjqjRVc02oHsPvnJ+Xgyqyd10Gazy5w2bApmq8PZ3H4LqO8qctAQ\r\n3lzY1YWT+V3iIGtUFiOaA6qGqCNvkXIP5LaV2R+U4S9IkGuNqqAcypmgr/eh\r\nEU4zCVnj3dyS7eVLPfmve0y3tZ695DncGwdutX3L9dX1Fh49kq0dhVBwKJX+\r\nK4WizfTFZHaD0gKQaMBUn/HtbxrA32DjJfKdbxe1cClwxXkdHEWhnWhXKMI9\r\nY6f40X3zwumro/vHRF1NLcKSK6AHtwkpHUM=\r\n=egfd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.0_1651599033885_0.26011227305476026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-switch","version":"0.26.1","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/mwc-ripple":"^0.26.1","@material/switch":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-YNBp2XUUjyr8d/3OD/jMqWi4+at7ToiNAJo6fS5U1Th+NLnOUA4/DVsrgf+02nsdjSckuCR3hanUwrU22cprqA==","shasum":"4d83f06d3aabfabe001d752070d31b1b609be905","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.26.1.tgz","fileCount":27,"unpackedSize":95222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFr3mjhpEiBmm7U7G4NDzkqMogFOCwSNvSRl090bc0AbAiEA4R4bYcxSCeHnA67AN+bX4rAairQFYMldsyE8Lf5dwF4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU2w//VquanNHe6MI8itvCOUA+Tm1jELEinhhiJNX6UOwgyLqhQSHw\r\nfjZ3o7KDE1z4SB1bGrkRaMiZUtk8q0JUTnXB6JFlNR9vokWpmOfHQrv+kz1k\r\npd/rMP1iomV/ujTxY8nSoN3yeT9fFF00NJBtHtE2sjQzXUPvTZlXuyfmg/mS\r\nbnQvNzmO1DcDGoPXJgxqsr7ccjz7TKTvWVVKMUhdy18uapQzk3w1MpRrlDmC\r\nPrQJdAYkwwlJUelwfkn/3vuH2bIW3O9q4+8cupvqvB47On3hQ/qmHhGS2Q5N\r\nbFCWL6r9PKv3BHYG81IFmwOrYpVb4oH0SEv7kFIabagR6oc9wbCJfUhbyZpE\r\n2jhS+sl5hbHGrfOz8a44HzrVdVZWQq8VjZQgllC1AD7+L4ratnYLlutEz5YV\r\nwsWvMaGs32ICmwQ6tAOL8lGBiAhhpiSWtuoSFw4yU+hA6OYfYw/W+lw5yro+\r\nLORg97TgFks9YS4CA8M5OXfdM683LteK3DDCoG5+NEYdJTcNexDZQep2Tir6\r\n5l7fxLCMEs0j5NnMHPnIe5jovM0ey7NkKv+E44PPFZp5b20zozUF0Ir75GjQ\r\nu/7AWslfVyalwggSYz1s4AbVeUTnJQVEzqpKmJJf+kLG4NgI6pE03joIXyor\r\n0kgpbvNEuGYMd3TbztOHeHDgPOaejOYnuTI=\r\n=IG6s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.26.1_1652128312017_0.4179048021670997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-switch","version":"0.27.0","description":"Material Design switch web component","keywords":["material design","web components","switch"],"main":"mwc-switch.js","module":"mwc-switch.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/mwc-ripple":"^0.27.0","@material/switch":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss && npm run build:styledeprecated","build:styledeprecated":"node ../../scripts/sass-to-lit-css/index.js deprecated/mwc-switch.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-switch@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-MKKjm42f8YyHN1HmvfgppgTPJUxulcmOqND5R7zI/kB38vFcWDxEhnpdUYr2kEsFtebpYNSF0j6FXcKV/W+fJw==","shasum":"c2451e2378f4bd56eb0207b3680f252fd489ca5e","tarball":"https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.27.0.tgz","fileCount":27,"unpackedSize":95222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3BvZzP8zDzuP0iYZ9zD3dDLsrraVdMOLR4bSuhJ/ioAIgARUYG0IGThp3smiuYhBEkjlxP7OB9bF2l6MSsWwYZ4g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Wg/9E6KBFAUib93rhrpAUE1AGfHFStskHy0LRTYzkzseNiYG20Az\r\n72ltwOZ+zqCQO3qpC2MyoZEXjcd3+iyD+3rqDVH1ulIU1ObQKadYvxkxjPDG\r\nq1IhkK6PJ5L+qteR5NczPOkmcuo39srByGGuwGhehIAbuom5U+wphytD4hcH\r\nSB/N1T7r9zQH/e+eC0ctfASU8SWcmz3wY51crfye7UkCl3fRI+uiEkmapgYW\r\n3oXle5P9JXSVpLh5fibjuNsOhkhWiRBVvPr+elXrBwurOZIhKa8aU2/5Udll\r\nJViAV+CQK2CQOin8W7tkL5M7QZhdbmmOH5Sx/Tyr5R2m7wtcFEH9rR5es0dB\r\n8cb+H3WIetD6zQns1TP7Ed2JpckMdNiFjIU6eph/T899UbTabhRRvUF1JDvQ\r\nVUdWVsUWngqcd+2G92a3Sn5FnOJYdS340xmGuvy/Z7nWzLoB1DLOxF17kXbb\r\n9OcKr8iKM5jWHxXb7js9D/NBjir4LoeX7DuM7jk+fy8jjEuP6BNVY1/Bvs0D\r\nmYPguNzqtx78+HkzEgDj39RFExXK8MnJqcbAdAooNU28FKHgfso/hFlt7Mw8\r\np3ftxRQAiFXrogO1ZtAPTB0yeou2FR60XQpL7FCVEa8iifWexebX1gyUbOHl\r\nC0Eu1n1n7rjbS8W+eMwgwJ/WmDtHDSgQ9Zs=\r\n=Ws4b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-switch_0.27.0_1660331529132_0.5120902921868125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2018-05-08T00:04:28.801Z","0.1.0":"2018-05-08T00:04:28.941Z","modified":"2024-04-04T18:57:04.297Z","0.1.1":"2018-05-09T21:05:08.011Z","0.1.2":"2018-06-14T22:51:09.368Z","0.2.0":"2018-09-14T00:36:41.477Z","0.2.1":"2018-09-22T01:00:25.883Z","0.3.0":"2018-10-04T23:26:04.783Z","0.3.1":"2018-10-08T19:20:51.638Z","0.3.2":"2018-11-17T02:06:05.053Z","0.3.3":"2018-12-04T00:58:14.167Z","0.3.4":"2018-12-13T20:39:23.699Z","0.3.5":"2019-01-11T22:16:51.301Z","0.3.6":"2019-02-05T20:18:43.391Z","0.4.0":"2019-03-12T00:01:32.732Z","0.5.0":"2019-03-26T22:38:55.864Z","0.6.0":"2019-06-05T22:20:26.500Z","0.7.0":"2019-08-27T21:23:49.151Z","0.7.1":"2019-08-28T02:54:28.372Z","0.8.0":"2019-09-04T00:04:52.125Z","0.9.0":"2019-09-27T01:36:15.681Z","0.9.1":"2019-09-30T21:05:11.315Z","0.10.0":"2019-10-11T23:28:20.531Z","0.11.0":"2019-11-26T21:49:34.132Z","0.11.1":"2019-11-27T00:26:43.729Z","0.12.0":"2019-12-17T23:47:58.257Z","0.13.0":"2020-02-04T04:46:41.100Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:29.061Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:07.966Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:32.854Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:57.929Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:16.200Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:55.768Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:08.866Z","0.14.0-canary.2f164110.0":"2020-03-03T21:34:00.438Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:55.419Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:23.454Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:45.333Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:39.029Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:22.661Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:29.713Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:26.943Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:46.824Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:15:00.761Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:32.507Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:07.431Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:42.629Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:57.541Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:10.184Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:04.841Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:22.613Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:33.422Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:54.660Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:02.659Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:52.766Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:32.013Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:26.554Z","0.14.0":"2020-03-19T21:28:43.357Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:03.893Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:20.806Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:05.705Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:39.523Z","0.14.1":"2020-03-23T17:57:35.470Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:03.644Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:49.150Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:16.342Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:09.706Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:15.144Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:39.709Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:29.255Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:40.660Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:27.367Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:03.857Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:01.421Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:52.959Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:14.913Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:21.053Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:53.134Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:09:01.440Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:14.601Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:35.264Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:44.441Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:50.658Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:43.805Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:19.318Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:00.432Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:47.218Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:53.338Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:29.361Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:11.943Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:14.280Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:38.031Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:27.357Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:20.714Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:29.331Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:27.060Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:14.997Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:38.767Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:29.476Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:20.926Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:28.650Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:48.057Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:07.359Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:53.416Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:04.607Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:07.252Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:12.497Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:12.091Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:28.847Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:28.215Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:50.510Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:56.037Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:52.805Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:57.249Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:13.766Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:21.904Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:36.579Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:30.657Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:57.618Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:13.053Z","0.15.0-canary.457bf035.0":"2020-05-01T20:51:02.471Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:43.536Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:19.177Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:52.505Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:42.497Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:04.800Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:16.084Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:21.183Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:58.242Z","0.15.0":"2020-05-05T22:36:13.466Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:39.982Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:55.276Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:24.839Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:41.897Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:58.790Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:14.518Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:51.459Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:30.571Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:20:00.051Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:27.224Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:07.430Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:25.479Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:36.186Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:48.802Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:20.816Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:30.951Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:16.593Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:50:00.199Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:40.398Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:49.465Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:45.634Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:48:02.719Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:29.373Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:35.716Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:58.642Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:25.395Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:31.160Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:34.793Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:28.909Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:49.182Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:59.884Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:56.188Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:17.245Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:30.320Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:26.038Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:21.683Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:40.278Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:10.942Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:46.753Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:21.793Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:52.551Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:57.485Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:40.680Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:59.757Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:24.296Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:49.512Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:58.689Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:10.968Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:34.262Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:03.301Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:17.311Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:53.039Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:14.348Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:54.439Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:58.404Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:49.021Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:49.372Z","0.16.0-canary.f155c058.0":"2020-06-18T18:08:00.450Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:48.855Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:53.558Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:51.745Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:50.555Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:10.802Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:25.498Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:31.536Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:07.228Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:23.800Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:29.908Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:03.726Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:24.799Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:33.609Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:58.225Z","0.16.1":"2020-06-30T21:14:54.929Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:19.659Z","0.17.0":"2020-07-01T19:44:28.392Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:34.797Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:36.908Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:43.193Z","0.17.2":"2020-07-02T05:58:20.489Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:32.548Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:48.165Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:23.932Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:36.033Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:49.780Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:55.708Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:38.177Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:30.432Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:34.367Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:14.613Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:59.774Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:43.077Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:09.513Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:35.065Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:08.486Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:53.294Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:14.134Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:43.197Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:02.133Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:43:53.964Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:42.281Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:05.524Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:06.917Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:51.412Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:51.480Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:08.811Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:35.186Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:40.885Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:03.100Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:20.761Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:30.286Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:43.218Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:05:00.588Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:22.487Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:38.368Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:45.790Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:51.207Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:41.380Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:03.193Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:24.529Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:23.375Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:45.814Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:03.254Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:45.067Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:17.635Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:37.961Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:56.025Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:18.152Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:57.686Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:48.242Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:51.863Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:36.423Z","0.18.0":"2020-08-03T21:24:30.373Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:05.289Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:20.579Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:01.888Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:10.527Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:38.882Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:36.260Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:00.692Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:39.454Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:58.302Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:09.536Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:41.265Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:37.235Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:11.415Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:56.481Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:22.215Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:38.989Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:44.948Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:31.624Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:55.822Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:16.851Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:43.241Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:50.488Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:14.795Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:52.617Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:20.962Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:17.487Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:06.392Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:13.813Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:11.191Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:38.143Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:22.713Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:48.998Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:26.489Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:05.902Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:19.362Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:36.861Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:24.172Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:20.139Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:30.418Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:32.856Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:52.508Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:20.648Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:31.963Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:51.262Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:48.951Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:04.595Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:48.473Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:21.590Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:29.293Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:34.376Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:28.887Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:47.546Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:28.257Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:29.538Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:35.328Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:43.376Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:33.641Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:57.428Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:00.528Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:35.982Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:11.689Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:48.987Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:50.743Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:47.256Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:01.031Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:23.333Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:41.265Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:34.424Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:47.108Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:37.927Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:26.854Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:25.909Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:18.390Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:39.357Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:11.825Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:19.848Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:35.785Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:59.290Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:45.980Z","0.19.0":"2020-10-07T22:33:24.606Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:57.513Z","0.19.1":"2020-10-08T23:05:54.605Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:25.635Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:32.683Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:29.509Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:34.668Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:04.334Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:42.330Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:40.906Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:28.935Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:18.332Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:26.517Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:09.125Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:17.674Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:23.208Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:14.552Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:53.656Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:50.207Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:10.407Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:03.537Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:59.744Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:10.644Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:13.299Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:21.352Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:18.087Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:00.013Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:41.958Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:17.762Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:35.675Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:04.284Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:26.459Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:58.790Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:25.616Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:09.168Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:51.673Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:39.379Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:58.306Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:26.860Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:32.052Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:32.890Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:29.376Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:06.216Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:44.341Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:31.196Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:34.255Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:03.999Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:18.168Z","0.20.0":"2020-12-03T22:28:54.306Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:05.805Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:16.154Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:14.438Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:05.394Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:09.264Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:27.599Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:01.274Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:53.484Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:50.699Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:33.627Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:26.280Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:18.032Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:45.583Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:14.941Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:27.447Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:25.273Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:45.675Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:31.771Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:32.310Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:40.399Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:50.275Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:34.505Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:32.782Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:59.646Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:41.923Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:57.361Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:51.239Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:46.511Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:46.755Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:43.300Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:41.072Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:01.422Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:08.092Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:29.063Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:46.164Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:20.238Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:29.720Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:41.455Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:23.637Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:57.227Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:57.709Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:40.728Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:02.714Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:18.832Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:30.966Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:53.605Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:19.066Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:23.298Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:14.729Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:23.121Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:36.985Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:07.188Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:20.638Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:24.028Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:45.862Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:11.264Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:23.557Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:32.610Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:38.832Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:16.214Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:26.549Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:25.525Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:42.016Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:59.250Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:05.024Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:25.297Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:56.938Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:35.867Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:22.405Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:49.382Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:54.716Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:45.107Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:27.298Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:45.159Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:11.919Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:59.452Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:32.331Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:58.105Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:58.740Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:43.719Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:09.234Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:02.153Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:16.522Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:41.686Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:38.482Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:07.169Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:55.305Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:20.274Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:03.095Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:35.916Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:21.699Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:11.331Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:36.435Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:10.778Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:47.140Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:39.075Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:59.126Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:32.707Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:48.917Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:25.824Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:27.452Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:38.185Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:16.642Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:21.841Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:38.200Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:02.787Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:07.620Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:16.561Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:51.317Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:54.458Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:46.011Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:24.702Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:07.817Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:33.210Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:13.721Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:35.926Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:17.181Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:17.294Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:51.109Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:25.001Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:44.335Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:32.842Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:43.271Z","0.21.0":"2021-04-30T23:58:08.059Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:29.861Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:28.051Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:52.482Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:54.515Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:10.248Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:39.351Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:34.191Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:12.068Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:06.499Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:34.068Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:30.259Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:44.391Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:49.816Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:33.395Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:21.507Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:52.186Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:45.313Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:36.661Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:37.055Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:26.843Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:36.532Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:04.420Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:41.456Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:16.558Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:53.055Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:46.073Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:07.564Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:27.733Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:15.760Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:17.082Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:40.793Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:02.501Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:32.442Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:35.034Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:40.653Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:43.438Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:18.502Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:35.894Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:31.589Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:22.271Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:32.164Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:34.283Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:19.368Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:23.530Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:45.428Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:24.375Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:55.168Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:16.181Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:33.753Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:08.758Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:57.437Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:49.365Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:17.795Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:23.031Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:16.550Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:29.598Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:01.423Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:17.805Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:36.505Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:36.484Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:30.271Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:45.759Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:00.666Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:05.889Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:47.938Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:19.734Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:53.286Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:53.554Z","0.22.0":"2021-07-14T22:38:55.437Z","0.22.1":"2021-07-14T22:52:53.180Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:20.101Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:46.722Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:57.154Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:52.125Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:17.137Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:03.092Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:12.017Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:28.510Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:00.841Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:20.774Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:50.614Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:19.786Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:56.926Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:58.758Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:51.002Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:53.404Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:51.616Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:11.561Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:07.445Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:19.559Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:28.808Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:28.932Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:02.610Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:12.237Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:21.531Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:23.622Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:50.355Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:39.312Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:26.696Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:09.896Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:02.784Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:03.039Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:45.135Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:58.613Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:10.418Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:46.526Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:07.140Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:50.339Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:10.546Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:15.026Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:55.697Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:19.788Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:31.361Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:16.896Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:42.666Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:36.409Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:38.910Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:31.120Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:37.380Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:43.780Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:47.948Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:33.935Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:56.841Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:22.145Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:37.403Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:12.226Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:58.349Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:17.112Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:32.574Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:11.691Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:02.275Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:18.872Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:04.447Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:51.727Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:18.023Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:48.430Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:00.749Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:29.142Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:41.032Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:54.742Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:05.387Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:39.009Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:16.656Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:01.866Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:40.277Z","0.23.0":"2021-09-13T21:35:51.269Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:25.771Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:29.087Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:35.427Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:37.308Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:11.634Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:29.559Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:08.637Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:53.398Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:32.883Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:05.432Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:54.308Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:18.255Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:57.116Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:20.499Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:06.055Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:03.708Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:57.566Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:21.877Z","0.25.1":"2021-09-21T03:12:45.625Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:19.936Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:29.303Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:59.000Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:49.072Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:19.814Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:33.430Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:42.235Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:01.705Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:01.608Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:04.753Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:27.581Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:45.116Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:25.573Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:31.832Z","0.25.2":"2021-10-11T23:18:33.543Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:39.415Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:10.321Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:47.889Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:40.976Z","0.25.3":"2021-10-21T17:55:44.657Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:40.180Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:06.492Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:58.715Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:35.632Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:02.856Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:45.322Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:11.012Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:14.107Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:05.975Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:38.585Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:28.213Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:27.380Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:57.088Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:14.865Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:53.538Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:28.099Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:11.001Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:11.102Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:06.117Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:23.188Z","0.26.0":"2022-05-03T17:30:34.076Z","0.26.1":"2022-05-09T20:31:52.234Z","0.27.0":"2022-08-12T19:12:09.309Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design switch web component","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/switch"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-switch>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-switch.svg)](https://www.npmjs.com/package/@material/mwc-switch)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n[Material Design Guidelines: Switch](https://material.io/components/selection-controls/#switches)\n\n[Demo](https://material-components.github.io/material-web/demos/switch/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-switch\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/switch/images/standard.png\" width=\"68px\">\n\n```html\n<mwc-switch></mwc-switch>\n```\n\n### Selected by default\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/switch/images/on.png\" width=\"68px\">\n\n```html\n<mwc-switch selected></mwc-switch>\n```\n\n### Disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/switch/images/disabled.png\" width=\"116px\">\n\n```html\n<mwc-switch disabled></mwc-switch>\n<mwc-switch selected disabled></mwc-switch>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/switch/images/styled.png\" width=\"116px\">\n\n```html\n<style>\n  mwc-switch {\n    --mdc-switch-selected-handle-color: teal;\n    --mdc-switch-selected-track-color: lightseagreen;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n    --mdc-switch-unselected-handle-color: goldenrod;\n    --mdc-switch-unselected-track-color: palegoldenrod;\n    --mdc-switch-unselected-icon-color: black;\n    /* ... additional states (hover/focus/pressed) + state-layer element */\n  }\n</style>\n<mwc-switch></mwc-switch>\n<mwc-switch selected></mwc-switch>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the switch.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/switch/images/formfield.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch selected></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch/mwc-switch.js';\n  import '@material/mwc-formfield/mwc-formfield.js';\n</script>\n```\n\n## API\n\n### Slots\n\n*None*\n\n### Properties/Attributes\n| Name       | Type      | Default | Description\n| ---------- | --------- | ------- | -----------\n| `selected` | `boolean` | `false` | If true, the switch is on. If false, the switch is off.\n| `disabled` | `boolean` | `false` | Indicates whether or not the switch is disabled.\n| `name` | `string` | `\"\"` | The form name of the switch.\n| `value` | `string` | `\"on\"` | The value of the switch to submit in a form when selected.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\nThe switch may be customized using the `theme()` mixin to emit custom\nproperties. The `theme()` mixin can be used for simple and complex theming,\nsuch as density.\n\n```scss\n@use '@material/mwc-switch/mwc-switch';\n\nmwc-switch {\n  @include mwc-switch.theme((\n    selected-handle-color: #00897b,\n    selected-track-color: #4db6ac,\n  ));\n}\n\nmwc-switch.dense {\n  @include mwc-switch.theme(mwc-switch.density(-1));\n}\n```\n\n```css\nmwc-switch {\n  --mdc-switch-selected-handle-color: #00897b;\n  --mdc-switch-selected-track-color: #4db6ac;\n}\n\nmwc-switch.dense {\n  --mdc-switch-state-layer-size: 44px;\n}\n```\n\nView the [MDC switch theme file](https://github.com/material-components/material-components-web/blob/master/packages/mdc-switch/_switch-theme.scss)\nfor a list of theme keys and available built-in themes.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Selected handle and ripple color.\n| `--mdc-theme-on-primary`             | Selected and unselected icon colors.\n\n## Additional references\n\n- [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n","readmeFilename":"README.md","keywords":["material design","web components","switch"]}